Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
You are on page 1/ 22
HTML(Hyper Text Markup Language)
What is HTML? HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content. To understand "HTML" from front to back, let's look at each word that makes up the abbreviation: Hypertext: Hypertext simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. Hypertext is a way to link two or more web pages (HTML documents) with each other. Markup Language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc. Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content. Example of basic structure of HTML:
<!DOCTYPE> <html> <head> <title>Web page title</title> </head> <body> <h1>Write Your First Heading</h1> <p>Write Your First Paragraph.</p> </body> </html>
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML. <html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <! DOCTYPE>. <head>: It should be the first element inside the <html> element, which contains the metadata(information about the document). It must be closed before the body tag opens. <title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional) <body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document. <h1> : Text between <h1> tag describes the first level heading of the webpage. <p> : Text between <p> tag describes the paragraph of the webpage.
Brief History of HTML:
Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of HTML is HTML5, which we will learn later in this tutorial.
HTML Versions: HTML 1.0: it was released in1991. HTML 2.0: it was released in 1995. HTML 3.2: it was released in 1997. HTML 4.01: it was released in 1999. HTML5 : The first draft of this version was announced in January 2008.
HTML text Editors
->Text editors are the programs which allow editing in a written text, hence to create a web page we need to write our code in some text editor. ->There are various types of text editors available which you can directly download, but for a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac). ->After learning the basics, you can easily use other professional text editors which are, Notepad++, Sublime Text, Vim, etc. HTML code with Notepad
Step 1: Open Notepad (Windows)
Step 2: Write code in HTML
Step 3: Save the HTML file with .htm or .html extension.
Step 4: Open the HTML page in your web browser.
The final output
Building blocks of HTML
An HTML document consist of its basic building blocks which are:
o Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < > brackets. o Attribute: An attribute in HTML provides extra information about the element, and it is applied within the start tag. An HTML attribute contains two fields: name & value.
o Elements: An HTML element is an individual component of an HTML file. In an HTML file,
everything written within tags are termed as HTML elements. Example: <!DOCTYPE html> <html> <head> <title>The basic building blocks of HTML</title> </head> <body> <h2>The building blocks</h2> <p>This is a paragraph tag</p> <p style="color: red">The style is attribute of paragraph tag</p> <span>The element contains tag, attribute and content</span> </body> </html>
HTML Tags HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag..
All HTML tags must be enclosed within < > these brackets. If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags). Syntax: <tag> content </tag> Pair Tags : Tags which are required to open and close called pair tags. Example : <head> ………….</head> <body>……………. </body> etc. Empty Tag : These tags are not required closing tags. Example: <br>, <hr> etc. HTML Head The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag. The head of an HTML document is a part whose content is not displayed in the browser on page loading. *Metadata defines the document title, character set, styles, links, scripts, and other meta information. Syntax: <head> content </head> HTML Title HTML title tag is used to provide a title name for your webpage. It is necessary for Search Engine Optimization (SEO). It is used within the <head> section to define the title of the HTML document. It appears in the browser tab or window and provides a brief description of the webpage’s content. Syntax: <title> home page </title> HTML body The <body> tag in HTML is used to define the main content present inside an HTML page. It is always enclosed within <HTML> tag. The <body> tag is the last child of the <html> tag. Syntax: <body> content </body> The default characteristics of a page, such as background color, font size and font width etc. can be specified as attributes of the <BODT> tag like: BACKGROUND BGCOLOR LINK, ALINK AND VLINK LEFT MARGIN TOP MARGIN HTML Headings HTML Heading tag helps us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides six heading tags from <h1> to <h6>. Every tag displays the heading in a different font size. Syntax: <h1>first heading</h1> <h2>second heading</h2> <h3>third heading</h3> <h4>fourth heading</h4> <h5>fifth heading</h5> <h6> sixth heading</h6> Example: This example illustrates the use of 6 heading tags from <h1> to <h6> in HTML. <!DOCTYPE html> <html>
</html> Output: HTML Paragraph and Break HTML <p> tags help us to write paragraph statements on a webpage. They start with the <p> tag and end with </p>. Syntax:
<p> Content... </p>
HTML <br> tag is used to insert a single line break. It does not have any closing tag. Syntax:
<br> *br is an empty tag so it is not needed to close. Example: <p> tag with <br> tag: <!DOCTYPE html> <html>
<head> <title> Example of paragraph and break elements </title> </head>
<body> <p> HTML stands for HyperText Markup Language. <br> It is used to design web pages using a markup language. <br>HTML is a combination of Hypertext and Markup language. <br>Hypertext defines the link between web pages. <br>A markup language is used to define the text document within the tag which defines the structure of web pages. </p> </body>
</html>
Output: HTML Horizontal Line HTML <hr> tag is used to break the page into various parts, creating horizontal margins with the help of a horizontal line running from the left to right-hand side of the page. This is also an empty tag and doesn’t take any additional statements. Syntax:
<hr> Example: <!DOCTYPE html> <html> <head> <title>HOME PAGE</title> </head> <body> <h1>Hello Learners</h1> <p> <br> This example illustrates the use of the <hr> tag for the horizontal line in HTML. <br> This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br> </p> <hr> <p> This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br> This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br> This example illustrates the use of the <hr> tag for the horizontal line in HTML.<br> </p> <hr> </body> </html> Output: HTML Images The <image> tag is used to insert an image into our web page. The source of the image to be inserted is put inside the <img src=”source_of_image“> tag. It is an empty tag. Syntax:
<head> <title>HTML img tag</title> </head> <body> <h1> example of img src tag </h1> source of image <br> <img src="https://media.tenor.com/QkGyKMgZGKEAAAAj/blooming-flower-sticker.gif"> </body> </html> Output: alt Attribute: it provides alternative text for an image if the image cannot be displayed. Example: <!DOCTYPE html> <html>
<head> <title>HTML img tag</title> </head>
<body> <h1> example of img src tag </h1>
<br> <br> <br> source is incorrect. <img src="ttps://media.tenor.com/QkGyKMgZGKEAAAAj/blooming-flower-sticker." alt="flower image"> </body> </html> width and height Attribute: The width and height Attribute is used to adjust the width and height of an image (in pixels). Example: <!DOCTYPE html> <html>
<head> <title>HTML img tag</title> </head> <body> <h1> example of img src tag </h1> <h2> with adjustment of 200x200</h2> <br> <br> <br> <img src="https://st5.depositphotos.com/35914836/64906/i/450/depositphotos_649066108-stock-photo- pink-flowers-park-spring-bloosom.jpg" alt="flower image" height="200" width="200"> </body>
</html> without adjustment:
HTML title Attribute:
The title attribute is used to explain an element by hovering the mouse over it. The behavior differs with various elements but generally, the value is displayed while loading or hovering the mouse pointer over it. * hovering dk vFkZ gS dlZj dks fdlh element ij ys tkuk A Example: output <html> <head> <title>title Attribute</title> </head> <body> <h3 title="Hello Learners!">Hover to see the effect</h3> </body> </html>
href Attribute: The href attribute in HTML, used with the <a> tag(anchor), specifies a link destination. Clicking the linked text navigates to this address. Example: <!DOCTYPE html> <html> <head> <title>link Attribute</title> </head> <body> <h1> example to show the link </h1> <br> <a href="https://nielit.gov.in/lucknow/index.php/"> Click to visit the site</a> <br> </body> </html> Absolute URLs: An absolute URL provides the complete address of a webpage or file on the internet, including the protocol “http:// or https://” domain, and path to the resource. Example: https://www.example.com/images/logo.png Relative URLs: A relative URL specifies the path to a resource about the current document’s path or the base URL of the website, without the domain name and protocol. Example: If the current URL is “https://www.example.com/about/team.html”, a relative URL to another page in the same directory like contact.html would simply be contact.html. The target attribute: The target attribute specifies where to open the linked document. Options Description _blank opens the linked document in a new window or tab _self opens the linked document in the same frame _parent opens the linked document in the parent frame _top opens the linked document in the full body of the window Targetframe opens the linked document in a named targetframe
HTML Text Formatting provides various tags for text formatting to enhance the visual presentation of content on a webpage. You can make your text bold, italic, etc. by using some HTML tags. Text Formatting can be categorized into 2 techniques, i.e., the logical tag where the tags denote the logical or semantic value of the text, and the Physical tag, which denotes the visual appearance of the text. Tags Descriptions <i> Showcases italicized text. <small> Renders text in a smaller font size. <ins> Highlights added or inserted text. <sub> Creates subscript text. <strong> Emphasizes text with importance, often in bold. <b> Displays text in a bold format. <mark> Accentuates text with a background highlight. <del> Strikes through text to signify deletion. <em> Adds emphasis to text, commonly styled as italic. <sup> Formats text as superscript. Preserve Formatting: Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tad <pre>. Syntax:
<pre> This is pre tag…….. This is pre tag………… This is pre tag……….. This is pre tag . </pre>
What is HTML Tables?
An HTML Table is an arrangement of data in rows and columns in tabular format. An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag. Table Cells: Table Cell are the building blocks for defining the Table. Syntax: </td> Content...</td> Table Rows: The rows can be formed with the help of combination of Table Cells.
Syntax: </tr> Content...</tr> Table Headers The Headers are generally use to provide the Heading. The Table Headers can also be used to add the heading to the Table. Syntax: </th> Content...</th> Example: <!-- index.html --> <!DOCTYPE html> <html>
Row span: <table> <tr> <th>Name</th> <td>Jill</td> </tr> <tr> <th rowspan="2">Phone</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table> HTML Lists: HTML lists allow web developers to group a set of related items in lists.
