HTML Basic Tags PDF by CodeHim
- 1. CodeHim HTML Basic Tags A simple guide to HTML tags for creating textual and visual content. Asif Mughal Web Developer
- 2. 2 HTML Basic Tags Table of Contents Introduction to HTML ...................................................................................................................................4 HTML Tags.................................................................................................................................................4 A Simple HTML Document........................................................................................................................4 Text formatting .............................................................................................................................................5 Headings....................................................................................................................................................5 Paragraphs ................................................................................................................................................6 Bold Text ...................................................................................................................................................6 Italic Text...................................................................................................................................................7 Underline Text...........................................................................................................................................7 Blockquote................................................................................................................................................7 Highlighted Text........................................................................................................................................8 Inserted Text.............................................................................................................................................9 Line Break & Horizontal Rule ........................................................................................................................9 Incorrect & Deleted Text.........................................................................................................................10 Emphasized Text .....................................................................................................................................10 HTML Division .............................................................................................................................................11 HTML Hyperlink...........................................................................................................................................11 Internal Links...........................................................................................................................................11 External Links ..........................................................................................................................................13 Link Title..................................................................................................................................................13 Target Attribute ......................................................................................................................................13 HTML Lists...................................................................................................................................................13 Unordered List ........................................................................................................................................14 Ordered List ............................................................................................................................................14 Description List........................................................................................................................................15 Nested List...............................................................................................................................................16 HTML Table .................................................................................................................................................17 HTML Images...............................................................................................................................................18
- 3. 3 HTML Basic Tags HTML5 Audio & Videos...............................................................................................................................19 HTML Inline Frame......................................................................................................................................20
- 4. 4 HTML Basic Tags Introduction to HTML HTML is the short of HyperText Markup Language include links (or ‘hyperlinks’) to other resources. documents designed to be displayed in a web browser. HTML Tags HTML elements are represented by tags and “>” angle bracket. The HTML tags come in pairs like <b> and </b called start or opening tag while other (</b>) is called end or closing tag. These browser how to display the content A Simple HTML Document An HTML document is a file ends with .html extension. It can be created using any text or code editor. The syntax of a standard HTML document is given below: Output: short of HyperText Markup Language. The ‘hypertext’ means that include links (or ‘hyperlinks’) to other resources. It is a standard markup language for documents designed to be displayed in a web browser. HTML elements are represented by tags. The tags are element names surrounded by and “>” angle bracket. The HTML tags come in pairs like <b> and </b>. The first tag (like <b>) is called start or opening tag while other (</b>) is called end or closing tag. These browser how to display the content. Such as, the <b> tag defines the bold text. A Simple HTML Document An HTML document is a file containing Hypertext Markup Language, and its filename It can be created using any text or code editor. The syntax of a standard HTML document is given below: means that text can It is a standard markup language for tags are element names surrounded by “<” The first tag (like <b>) is tags tell the and its filename
- 5. 5 HTML Basic Tags Text formatting Text formatting refers to the example: bold, italics, and underlining, are all formatting attributes of text. In HTML, we can format any textual content using HTML tags. Headings Headings are standard features of information. In HTML, there are six levels of a heading. The first level heading can be defined using <h1> tag. Similarly, <h2> used for second Code Example: The following is the example of HTML heading tags. Output: Text formatting refers to the attributes of text other than the actual text itself. For example: bold, italics, and underlining, are all formatting attributes of text. In HTML, we can format any textual content using HTML tags. Headings are standard features of technical documents that serve important information. In HTML, there are six levels of a heading. The first level heading can be defined Similarly, <h2> used for second level, <h3> used for third level and so on. le of HTML heading tags. attributes of text other than the actual text itself. For example: bold, italics, and underlining, are all formatting attributes of text. In HTML, we can important information. In HTML, there are six levels of a heading. The first level heading can be defined level, <h3> used for third level and so on.
- 6. 6 HTML Basic Tags Paragraphs A paragraph is a unit of text or other content that starts at the beginning of a document, immediately after a carriage return. Code Example: The following HTML code describe Output: Bold Text A bold font is any text that is darkened to help emphasize a remark or comment can bold any text by placing it inside the <b> and </b>. Output: A paragraph is a unit of text or other content that starts at the beginning of a document, immediately after a carriage return. HTML allows you to create paragraphs using <p> tag. describes two paragraphs. is any text that is darkened to help emphasize a remark or comment can bold any text by placing it inside the <b> and </b>. A paragraph is a unit of text or other content that starts at the beginning of a document, HTML allows you to create paragraphs using <p> tag. is any text that is darkened to help emphasize a remark or comment. In HTML, we
- 7. 7 HTML Basic Tags Italic Text Italic is a style of font that slants the letters evenly to the right. <i> tag used to italic the text. Output: Underline Text An underline is a section of text in a document where the words have a line running beneath them. In HTML, the <u> tag is used to make a text underline. Output: Blockquote The HTML Block Quotation Element quotation. We can define a section that is quoted from another source <blockquote> tag. is a style of font that slants the letters evenly to the right. In HTML documents, the is a section of text in a document where the words have a line running . In HTML, the <u> tag is used to make a text underline. Block Quotation Element indicates that the enclosed text is an extended a section that is quoted from another source using HTML In HTML documents, the is a section of text in a document where the words have a line running indicates that the enclosed text is an extended using HTML
- 8. 8 HTML Basic Tags Code Example: The following HTML code explains the <blockquote> tag. Note: The “cite” attribute specifies the source URL of the quotation. Output: For short inline quotes in a document, use the <q> tag. Output: Highlighted Text The “<mark>” tag defines marked/highlighted text place your text inside the <mark> tag. The following HTML code explains the <blockquote> tag. Note: The “cite” attribute specifies the source URL of the quotation. For short inline quotes in a document, use the <q> tag. efines marked/highlighted text in HTML document. To mark a part of text, place your text inside the <mark> tag. To mark a part of text,
- 9. 9 HTML Basic Tags Code Example: Output: Inserted Text In HTML, the <ins> tag defines a text that has been inserted into a document Output: Line Break & Horizontal Rule In HTML, the <br> tag used to inserted. The <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. Note: The <br> and <hr> tag has no ending tag. efines a text that has been inserted into a document. Horizontal Rule In HTML, the <br> tag used to cuts the line. It breaks the current line from the position where it is is used to insert a horizontal rule or a thematic break in an HTML page to divide Note: The <br> and <hr> tag has no ending tag. from the position where it is is used to insert a horizontal rule or a thematic break in an HTML page to divide
- 10. 10 HTML Basic Tags Output: Incorrect & Deleted Text HTML <s> tag defines a text that is no longer correct. text. These tags have a same output. Output: Emphasized Text Emphasis is the strengthening of words in a text with a font in a different style from the rest of the text, to highlight them. The <em> tag is used for important word to make it strong text that is no longer correct. Similarly, the <del> tag display a deleted text. These tags have a same output. mphasis is the strengthening of words in a text with a font in a different style from the rest of the text, tag is used for emphasized text. Similarly, the <strong> trong. Similarly, the <del> tag display a deleted mphasis is the strengthening of words in a text with a font in a different style from the rest of the text, <strong> tag used for an
- 11. 11 HTML Basic Tags HTML Division In HTML, a <div> tag defines division together to apply CSS for them. The on a webpage using JavaScript. It’s really important in regards to designing. However, in textual content it is not necessary. HTML Hyperlink A hyperlink (or simply a link) on it. It might be an icon, graphic, or text that l create a link to another page (or file) using <a> tag. The most important attribute of the <a> element is the href attribute that indicates the destination of the link. A basic syntax of an HTML link is a Output: The href attribute specifies the URL of the page the link goes to inside the quotations. Internal Links The <a> (anchor) tag can also be used to create internal links to jump to different sections within a webpage. To do so, assign a link's href attribute to a for the element that you want to internally link efines division to put more than one HTML element and can group The div tag is very flexible in creating web layouts and to perform various task It’s really important in regards to designing. However, in textual content it is not hyperlink (or simply a link) is a reference to data that the reader can follow by clicking It might be an icon, graphic, or text that links to another file or object. HTML allows you to create a link to another page (or file) using <a> tag. The most important attribute of the <a> element is the href attribute that indicates the destination of the link. A basic syntax of an HTML link is as follows: he href attribute specifies the URL of the page the link goes to. The destination URL placed can also be used to create internal links to jump to different sections within gn a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link. put more than one HTML element and can group is very flexible in creating web layouts and to perform various tasks It’s really important in regards to designing. However, in textual content it is not is a reference to data that the reader can follow by clicking HTML allows you to The most important attribute of the <a> element is the href attribute that indicates the The destination URL placed can also be used to create internal links to jump to different sections within hash symbol # plus the value of the id attribute
- 12. 12 HTML Basic Tags Output: Besides this, internal pages (pages on a same domain For example, there are three pages in a same directory; these pages can be accessed using: <a href=”page1.html”> Page 1 </a> this, internal pages (pages on a same domain/directory) can be linked without using full path. For example, there are three pages in a same directory; these pages can be accessed using: ) can be linked without using full path. For example, there are three pages in a same directory; these pages can be accessed using:
- 13. 13 HTML Basic Tags <a href=”folder/page2.html”> Page 2 inside a folder </a> <a href=”../folder/page3.html”> A page placed in one level back folder </a> External Links External Links are hyperlinks that point at (target) any domain other than the domain the link exists. For example: Output: Link Title The title attribute defines a tooltip description for a link. Target Attribute The target attribute specifies where to open the linked The following are some values that can be inserted in target attribute. 2 inside a folder </a> <a href=”../folder/page3.html”> A page placed in one level back folder </a> External Links are hyperlinks that point at (target) any domain other than the domain the link The title attribute defines a tooltip description for a link. specifies where to open the linked page. The following are some values that can be inserted in target attribute. External Links are hyperlinks that point at (target) any domain other than the domain the link
- 14. 14 HTML Basic Tags _blank: Opens the linked document in a _self: Opens the linked page in the same tab as it was clicked (this is default) _parent: Opens the linked document in the parent frame _top: Opens the linked document in the full body of the window HTML Lists Lists are used to group related other and easy to read. There are three list types in HTML: 1. Unordered List 2. Ordered List 3. Description List Unordered List In HTML, unordered list used to group a set of related items in no particular can be defined using “<ul>” tag. The following is a basic HTML structure for Output: Ordered List An ordered list is used to group a set of related items in a specific order. It can be defined using HTML “<ol>” tag. The following is a basic HTML structure for an ordered list. Opens the linked document in a new tab Opens the linked page in the same tab as it was clicked (this is default) Opens the linked document in the parent frame Opens the linked document in the full body of the window Lists are used to group related information so they are clearly associated with each other and easy to read. There are three list types in HTML: In HTML, unordered list used to group a set of related items in no particular The following is a basic HTML structure for an unordered list. An ordered list is used to group a set of related items in a specific order. It can be ollowing is a basic HTML structure for an ordered list. information so they are clearly associated with each In HTML, unordered list used to group a set of related items in no particular order. It An ordered list is used to group a set of related items in a specific order. It can be
- 15. 15 HTML Basic Tags Output: Description List A description list is a list of items with a description or definition of each item. description list can be created using <dt> tag that specifies a term, and the <dd> tag specifies the To create a description list, use the following HTML code: Output: A description list is a list of items with a description or definition of each item. created using HTML <dl> tag. This tag is used in conjunction with the that specifies a term, and the <dd> tag specifies the definition of a term. To create a description list, use the following HTML code: A description list is a list of items with a description or definition of each item. A is used in conjunction with the term.
- 16. 16 HTML Basic Tags Nested List List in another list is called a nested list unordered lists. To define a nested list, place “<ul>” tag inside the “<li>” tag of a parent list. The following HTML code defines a nested list. Output: List in another list is called a nested list. HTML allows you to nest both ordered and unordered lists. To define a nested list, place “<ul>” tag inside the “<li>” tag of a parent list. The following HTML code defines a nested list. HTML allows you to nest both ordered and unordered lists. To define a nested list, place “<ul>” tag inside the “<li>” tag of a parent list.
- 17. 17 HTML Basic Tags HTML Table An HTML table is used to represent data in with HTML “<table>” tag. Each table row is defined with the “<tr>” tag. A table header is defined with the “<th>” tag. The following is a basic HTML code structure to create a table. An HTML table is used to represent data in rows and columns. A table can be defined with HTML “<table>” tag. Each table row is defined with the “<tr>” tag. A table header is The following is a basic HTML code structure to create a table. rows and columns. A table can be defined with HTML “<table>” tag. Each table row is defined with the “<tr>” tag. A table header is
- 18. 18 HTML Basic Tags Output: HTML Images The images can give depth and context to a description, a testimonial or story and provide a much more immersive experience than writing alone. To include an image in your HTML document, use <img> tag. The “src” attribute specifies the URL of an image alternate text for an image. ges can give depth and context to a description, a testimonial or story and provide a much more immersive experience than writing alone. To include an image in your HTML document, use <img> tag. This tag has two required attributes that are: src and alt. pecifies the URL of an image and “alt” attribute specifies an ges can give depth and context to a description, a testimonial or story and provide a much more immersive experience than writing alone. To include an image in your This tag has two required attributes that are: src and alt. pecifies an
- 19. 19 HTML Basic Tags HTML5 Audio & Videos The HTML Video element ( playback into the document. Before HTML5, a video could only be played in a browser with a plug-in like flash. To embed a video in your HTML document use the following code: Output: Similarly, we can embed an audio file in HTML document using the following code: The HTML Video element (<video>) embeds a media player which supports video Before HTML5, a video could only be played in a browser with a a video in your HTML document use the following code: Similarly, we can embed an audio file in HTML document using the following code: ) embeds a media player which supports video Before HTML5, a video could only be played in a browser with a a video in your HTML document use the following code: Similarly, we can embed an audio file in HTML document using the following code:
- 20. 20 HTML Basic Tags Output: HTML Inline Frame An Inline Frame is an HTML document embedded inside another HTML document on a website. An inline frame can be inserted using <iframe> tag. Output: is an HTML document embedded inside another HTML document on a website. An inline frame can be inserted using <iframe> tag. is an HTML document embedded inside another HTML document on a website.