Introduction
Hey Guys!! Welcome to my 5th day of learning web development. In this blog we are going to see about the Introduction of HTML , for the last video we saw what is meant by HTML. and Where it is used and its importance.
HTML DOCTYPE Declaration
It is an instruction that appears at the beginning of an HTML document, before the tag.
It is a primary role to tell the web browser which version of the HTML page is written in and ensures that the browser renders the content correctly.
It is not a HTML tag; rather, it is a special tag that specifies how the browser should interpret the html
It always recommends use at the top of the HTML file for HTML5
<!DOCTYPE html>
This is how the declaration looks.
It doesn't tell directly to the web browser what version is being used, but rather it tells the browser to use a specific rendering mode.
there are two main modes
- Standards Mode
- Quirks Mode
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<p>welcome to my website</p>
</body>
</html>
Basics
HTML defines the layout of the webpage using tags and elements, allowing for the display of text, images, links, and multimedia content.
HTML is used 90% of the web page today
Basic Document structure
HTML follows some structure it begins with a document type declaration, setting up the foundation page.
it Introduces basic tags like `head , body, title` although it is not mandatory, it is a good convention to start the document with the below-mentioned tag.
html tag - encloses all the html document
head tag - contains header information about the web page
title tag - used within head tag to define the title of the HTML document.
body tag - visible the content of the web page such as text, images, audio, videos and links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p>GeeksforGeeks is a online study platform</p>
</body>
</html>
HTML Headings
HTML heading tags are used to create headings for the content of the web page. These tags are typically placed inside the body tag.
These are mainly six tags that are offered h1 to h6 where each heading differs in font size.
Paragraph Tag
The paragraph tag is used to write a paragraph in the web page. It is mainly return inside of the body tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</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>
Break tag
The break tag is used to insert a single line of break in the HTML code
It doesn't require end tag
Horizontal Line
A Horizontal line is used to divide the page into sections by creating a horizontal line that spans from the left to the right side of the web page.
This is an empty tag and it doesn't require any empty tag.
HTML Comments
HTML comments are annotations in your code that are not displayed in your browser.
They are enclosed within tags that are primarily used for documentation, explanation and temporarily code unavailable.
Syntax
- Single-line Comment
<!-- This is a single-line comment --> - Multiline Comment
<!-- This is a multi-line comment spanning multiple lines -->
EXAPMLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!-- This is a heading tag -->
<h1>Welcome to GeeksforGeeks</h1>
<!-- This is a paragraph tag -->
<p>Learn HTML, CSS, and JavaScript here.</p>
</body>
</html>
HTML Images
This tag is used to insert images in your HTML code.
img tag is used here, to insert the image and the source of the image should specified with the src attribute.
<img src="source of image">.
View HTML Code
While checking the web page, You might want to see the HTML code behind it, you can see it by using the entire code or a specific element.
View the source of the entire page
Press Ctrl+U or Right-click on the page and select the "View page Source" Option.
Inspect the HTML Element on a page
To check the specified element, you can use right-click on the page and select the "Inspect" option.
HTML Tables
HTML tables are used to organize the data in a grid format with rows and columns.they are created by using
| - table headers | - table data.`
Code`
Styling CSS in HTML tableWhile adding CSS in html, such as adding borders, background colors, text alignments, here are some basic styling as follows: 1.Adding Border: Adding a border in the code is in a set structure; you have to mention it in the code. if you failed to enter, it displays the output without a border. `table, th, td {border: 1px solid black;}`  2.Adding cell padding: It specifies the cell content between the cell and the borders. if we don't specify a padding, the table cells will be displayed without padding. `th, td {padding: 20px;}`  3.Adding left and right alignment in an HTML table: The table headings are bold and centered by default. to align the table headings, we must use the CSS property. `th{text-align:left}`  4.Adding border spacing in an HTML table: Border spacing specifies the space between the cells. To set the border spacing for a table, we must use the CSS border-spacing property. `table{border-spacing:5px;}`  5.Adding cells that span many columns in HTML tables: To make the cell span more than one column, we must use the colspan attribute.  6.Adding cells that span many rows in HTML tables To make a cell span more than one row, we must use the rowspan attribute.  7.Adding a captions in an HTML table To add a caption in a table, we must use the "caption" tag. ` |
|---|
Top comments (0)