Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

HTML Notes

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages and describes their structure using elements that dictate how content is displayed. A basic HTML document includes a doctype declaration, root element, head for meta information, and body for visible content, with various tags for headings, paragraphs, links, and images. HTML elements are not case sensitive, can have attributes for additional information, and can be styled using CSS.

Uploaded by

harshita Ujjinwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML Notes

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages and describes their structure using elements that dictate how content is displayed. A basic HTML document includes a doctype declaration, root element, head for meta information, and body for visible content, with various tags for headings, paragraphs, links, and images. HTML elements are not case sensitive, can have attributes for additional information, and can be styled using CSS.

Uploaded by

harshita Ujjinwal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

A Simple HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>


The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Save the HTML Page


Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

HTML Links
HTML links are defined with the <a> tag:

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

HTML Elements
The HTML element is everything from the start tag to the end tag:

<tagname>Content goes here...</tagname>


Examples of some HTML elements:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:

Example
<a href="https://www.w3schools.com">Visit W3Schools</a>

The style Attribute


The style attribute is used to add styles to an element, such as color, font, size, and
more.

Example
<p style="color:red;">This is a red paragraph.</p>

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

HTML Comment Tag


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

RGB Color Values


In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

HEX Color Values


In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff
(same as decimal 0-255).

Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

HTML Links - The target Attribute


By default, the linked page will be displayed in the current browser window. To change
this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:


 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

How To Add a Favicon in HTML


<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Table Cells
Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row.

Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag
instead of the <td> tag:

th stands for table header.


HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Syntax
<iframe src="url" title="description"></iframe>

Examples
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

</body>
</html>

You might also like