WEB TECHNOLOGIES
The term "web technology" refers to the equipment, methods, protocols, and standards employed in the development and administration of websites and web-based software. It includes many different fields of study, such as web design, web servers, and web protocols. The following list covers important facets of web technology:
The markup language used to create web pages is called HTML (Hypertext Markup Language). By employing tags to specify components like headings, paragraphs, links, photos, and tables, it provides the structure and content of web publications.
Cascading Style Sheets (CSS): CSS is used to format and style how web pages are presented. It separates the design from the text specified in HTML and gives developers flexibility over a website's layout, colours, fonts, and other visual elements.
JavaScript: JavaScript is a client-side (in the web browser) programming language that enables interaction and dynamic content on online pages. It is frequently used for things like animations, form validation, and AJAX (Asynchronous JavaScript and XML), which allows you to get data from servers without having to reload the entire website.
Web servers are software programmes that deliver web information and manage requests from clients (web browsers). Apache, Nginx, and Microsoft IIS are examples of common web server software. For secure communication, they support HTTP (Hypertext Transfer Protocol) and HTTPS (HTTP Secure).
Frameworks for web development: Frameworks for web development offer established structures, libraries, and tools to speed up the creation of web applications. For front-end development, popular frameworks include React.js, Angular, and Vue.js; for back-end development, popular frameworks include Django, Ruby on Rails, and Laravel.
Application Programming Interfaces (APIs): APIs allow various software programmes to interface and communicate with one another. online APIs give online application developers access to and use of information and features offered by other services, such as social media platforms, payment processors, or mapping services.
Web Standards and Protocols: Web standards and protocols make ensuring that various web technologies and browsers are compatible with one another. Examples include protocols like HTTP, TCP/IP, and DNS (Domain Name System), as well as World Wide Web Consortium (W3C) standards like HTML5 and CSS3.
Content Management solutions (CMS): CMS platforms like Drupal, Joomla, and WordPress offer pre-built solutions for building and managing websites. They provide intuitive interfaces, themes, and plugins that make it easier to design and maintain websites.
RWD (responsive web design) is a method of website design that makes sure webpages adapt and display well on various devices and screen sizes. To create a seamless user experience across desktops, tablets, and mobile devices, it entails the use of flexible layouts, fluid pictures, and media queries.
Web security: Web security entails defending websites and web applications against flaws and online dangers. It features safeguards like input validation, access control, and defence against widespread web attacks like cross-site scripting (XSS) and SQL injection. It also includes SSL/TLS certificates for secure communication.
Unit-I
HTML COMMON TAGS HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor
Type in the following text in “NOTEPAD”:
Save the file as "mypage.html".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.html" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\webdesign\mypage.html". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.
The text between the <body> tags is the text that will be displayed in your browser. The text between the <b> and </b> tags will be displayed in a bold font.
<b>This text is bold</b>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML ELEMENTS
HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags.
HTML Tags
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page. This tag defines the body element of your HTML page: <body>. With an added bgcolor
attribute, you can tell the browser that the background color of your page should be red, like this:
<body bgcolor="red">
This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">. Attributes always come in name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element.
1. HEADINGS
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6>
defines the smallest heading.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This <br> is a para<br>graph with line breaks</p>
<!-- This is a comment -->
HTML automatically adds an extra blank line before and after a heading.
2. PARAGRAPHS
Paragraphs are defined with the <p> tag.
HTML automatically adds an extra blank line before and after a paragraph.
3. LINE BREAKS
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.
The <br> tag is an empty tag. It has no closing tag.
4. Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.
Note that you need an exclamation point after the opening bracket, but not before the closing
bracket.
HTML TEXT FORMATTING
HTML defines a lot of elements for formatting output, like bold or italic text. How to View HTML Source? To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the
page.
1. Text Formatting Tags
Tag Description
<i> Defines italic text. Recommend using <em>
<b> Defines bold text. Recommend using <strong>
<em> Defines emphasized text. Renders as italic text.
<strong> Defines strong text. Renders as bold text.
<a href="url">Text to be displayed</a>
<a href="http://www.google.co.in/">Google</a>
Example
Source Output
<i>Italic text</i><br />
<b>Bold text</b><br />
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
Italic text
Bold text
Emphasized text
Strong text
What is the difference between <i> & <em> and <b> & <strong>, <b> and <i> will both become deprecated tags. Using <strong> and <em> are the tags that will be cross-browser compatible as browsers move forward to embrace the new standards in HTML (e.g., XHTML)
2. HTML Links
HTML uses a hyperlink to link to another document on the Web. HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
The line above will look like this in a browser:
Google
The Target Attribute
With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window:
The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.
Below is the syntax of a named anchor:
<a name="label">Text to be displayed</a>
Comments