Overview of Web Technologies HTML Introduction HTML Introduction and Syntax HTML Hyper Text Markup Language Used to create and design web pages Markup language used to mark up text with meta information Syntax is simple and easy to learn Web Document Structure Web pages have a document structure Elements are organized in a tree like structure known as the DOM Document Object Model Each element is represented as a node in the DOM HTML stands for Hyper Text Markup Language It is the standard markup language for creating web pages and web applications HTML describes the structure of a web page It consists of a series of elements or tags Tags usually come in pairs The web is built on top of several technologies like HTML CSS JavaScript etc HTML is used to create the structure of a web page CSS is used to style the web page JavaScript is used to add interactivity to the web page HTML Elemen ts Metadata Title and Link The metadata element provides information about the HTML document The title element specifies the title of the web page The link element is used to link external resources like CSS stylesheets HTML Blocks and Attributes HTML elements can be divided into blocks and inline elements HTML headings are used to indicate the hierarchy of the content on the web page There are six levels of headings from The nav element is used to create navigation links on the web page Navigation links help users to navigate through the web page HTML BASE meta name view port content width device width initial scale 1 0 DOCTYPE html html head meta charset UTF 8 title Document title head body body html Where doctype html specific the document type asHTML5 UTF 8 declares the character encoding view port for set the view port Inside the head tag include metadata style sheets and scripts essential for web pages The body tag contains all the visible content of a web page such as text images videos and interactive elements KINDS OF TAGS 1 Closing Tags p hello p 2 Self Closing tags img src profile jpg 3 Nested tags ul li list li u 4 Sectioning Tags These tags define sections in a document creating a hierarchical structure section nav aside header main article footer di v 5 Text content Tags These tags define the textual content and it s structure h1 p ul pre blockquote hr 6 Inline Text Tags These tags affect the appearance of text inline without breaking the flow a strong em i span br code mark 7 Form Tags These tags create forms for user input form input textarea button select label fieldset 8 Table Tags These tags create and format tables table tr th td thead tbody tfoot 9 MultiMedia Tags These tags embed multimedia content img audio video source track 10 Embedded Content Tags iframe embed object 11 Scripting Tags script 12 Metadata Tags title meta link HTML Forms and Inputs HTML forms are used to collect user input Elements such as input textarea button are used to create forms Forms are used to submit data to a server for processing HTML Elements Metadata Title and Link Metadata data about data HTML elements like meta title and link are used to provide metadata The title element defines the title of the webpage The link element is used to link external resources such as CSS HTML Blocks and Attributes HTML blocks contain content Attributes additional information about an element Example p id my paragraph hello p Where id Attribute Name my paragraph Attribute Value hello content p closing tag p opening tag id is an attribute that gives a unique identifier to the paragraph HTML Headings and Navigation Headings are defined using the tags h1 to h6 nav element is used to define navigation links header is used to define a header for a document or a section footer is used to define a footer for a document or a section main element is used to define the main content of a document HTML Elements Metadata Title and Link some advance content Metadata is information about the HTML document that is not displayed on the web page itself but is machine parsable The meta element is used to define metadata about the HTML document such as character set viewport and author The link element is used to define a link between the HTML document and an external resource such as a stylesheet The title element is used to define the title of the HTML document which is displayed in the web browser s title tab The meta and link elements are placed within the head element of an HTML document The title element is also placed within the head element The meta element has several attributes that can be used to specify metadata such as charset name and content The charset attribute is used to specify the character encoding of the HTML document The name attribute is used to specify the type of metadata being defined The content attribute is used to specify the actual metadata value The link element has several attributes that can be used to specify the link to an external resource such as href type and rel The href attribute is used to specify the URL of the external resource The type attribute is used to specify the MIME type of the external resource The rel attribute is used to specify the relationship between the HTML document and the external resource The title element has no attributes Note This is a basic overview of the HTML Metadata Title and Link There are more attributes and use cases that you can learn about in a more detailed documentation HTML Blocks and Attributes HTML Block Elements The div element is a block level element that is used to group other HTML elements together It is often used as a container for other elements The span element is an inline level element that is used to group together a small section of text or other inline elements The p element is used to define a paragraph of text The header footer and nav elements are used to define various parts of a web page s layout HTML GLOBAL ATTRIBUTES The class attribute is used to specify one or more classes for an element Classes are used to style elements with CSS The id attribute is used to give an element a unique identifier within a document The style attribute is used to specify inline CSS styles for an element The title attribute is used to provide additional information about an element HTML BLOCK ATTRIBUTES The width and height attributes are used to specify the width and height of a block level element The align attribute is used to specify the alignment of a block level element Remember that the key point of blocks and attributes in HTML is the ability to