PDF HTML

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.
What is Web Browsers?
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to
display the document:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Learn HTML Using Notepad?
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).
• Step 1: Open Notepad (PC)
• Windows 8 or later:
• Open the Start Screen (the window
symbol at the bottom left on your
screen). Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories
> Notepad
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).
A Simple HTML Document
<!DOCTYPE html> Example Explained
<html> 1. The <!DOCTYPE html> declaration defines that this document is
<head> an HTML5 document
<title>Page Title</title> 2. The <html> element is the root element of an HTML page
</head> 3. The <head> element contains meta information about the HTML
<body> page
4. The <title> element specifies a title for the HTML page (which is
<h1>My First Heading</h1> shown in the browser's title bar or in the page's tab)
<p>My first paragraph.</p> 5. 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.
</body> 6. The <h1> element defines a large heading
</html>
7. The <p> element defines a paragraph
How to View HTML Source?
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome)
or "View Source" (in Edge), or similar in other browsers. This will open
a window containing the HTML source code of the page.
What is an HTML Tags?
HTML is a markup
language and makes use
of various tags to format
the content. These tags
are enclosed within angle
braces <Tag Name>
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>
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.

There are some HTML elements which don't need to be closed, such as <img.../>,
<hr /> and <br /> elements. These are known as void elements.
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<h1>This is <i>italic</i> heading</h1> (NESTED ELEMENT)
HTML Body TAG
• BGCOLOR: It changes the default background color.
• Background: This tag specifies the name of the jpg file (img) that used as background of
the document.
• Text : This tag changes the body text color.
Example
<body bgcolor=red text=yellow>This is heading 1</body>
Example
<body background= file:///E:/CORE%20COMPUTER%20Shop%20work/adca%20certificate.jpg >This is heading 1</body>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>Heading 1</h1> Align = Left, Right, Center, Justify

<h2>Heading 2</h2>
<h3>Heading 3</h3> <h1 align=center>Centered Heading</h1>
<h4>Heading 4</h4>
<h5>Heading 5</h5> <h1 align=right>Right Heading</h1>
<h6>Heading 6</h6>
<h1 align=justify>Equals Heading</h1>
HTML Paragraphs
A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p> Align = Left, Right, Center, Justify
<p>This is another paragraph.</p>
<p align=Left> This is a paragraph.</p>
<p align=Right> Centered Heading</p>
<p align=center> This is a heading</p>
<p align=Justify> This is a paragraph.</p>
HTML Elements
<hr> The <hr> element is used to separate content (or define a change) in
an HTML page
<br> Use <br> if you want a line break (a new line) without starting a new paragraph
<pre>
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
<p> The HTML <p> element defines a paragraph.

HTML Font Tag
HTML Font tag provides no real function, but with the
help of a few attributes, this tag is used to chnge the
style, size, and color of HTML text element.
<font color=“red”>Heading 1</font>
<font size=“5”>Heading 1</font>
<font face=“arial”> </font>
HTML Formatting Elements
• <b> - Bold text
<b>This text is bold</b>
• <u> - Underling text
• <i> - Italic text
<i>This text is italic</i>
• <em> - Emphasized text
• <mark> - Marked text
<u>This text is Underline</u>
• <small> - Smaller text
• <del> - Deleted text
<del>This text is Underline</del>
• <ins> - Inserted text
• <sub> - Subscript text <sup> a2+b2 </sup>
• <sup> - Superscript text
HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.com">This is a link</a>
<a href="https://www.google.com">Core Computer Center</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Open image in firefox browser & copy the location

<img src="file:///E:/CORE%20COMPUTER%20Shop%20work/adca%20certificate.jpg" width="104" height="142">
HTML Lists
Unordered HTML List HTML Description Lists
<ul> <dl>
<li>Coffee</li> <dt>Coffee</dt>
<li>Tea</li> <dd>- black hot drink</dd>
<dt>Milk</dt>
<li>Milk</li> <dd>- white cold drink</dd>
</ul> </dl>
Ordered HTML List

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
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 <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to: <a href="https://www.w3schools.com">Visit W3Schools</a>
•The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:
<img src="img_girl.jpg">
• <p style="color:red;">This is a red paragraph.</p>
HTML Styles
The HTML Style Attribute
<tagname style="property:value;">
The CSS background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Text Color/Size/Alignment/Border
<h1 style="color:blue;">This is a heading</h1>
<h1 style="font-size:300%;">This is a heading</h1>
<h1 style="text-align:center;">Centered Heading</h1>
<h1 style="border:2px solid Tomato;">Hello World</h1>
HTML Styles CSS
•The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
<tagname style="property:value;">
I am Red
<h1 style="color:red;">I am Red</h1>
<p style="color:blue;">I am Blue.</p>
I am Blue
<h1 style="font-size:300%;">I am Big</h1> I am Big
HTML Headings
•HTML headings are defined • The <font> tag Not Supported in HTML5.
with the <h1> to <h6> tags. •The <font> tag was used in HTML 4 to specify the font face,
font size, and color of text.
<h1>Heading 1</h1> <h1 style="font-size:60px;">Heading 1</h1>

<h2>Heading 2</h2>
<h1 style="background-color:powderblue;">This is a heading</h1>
<h3>Heading 3</h3>
<h4>Heading 4</h4> <h1 style="text-align:center;">Centered Heading</h1>
<h5>Heading 5</h5>
<h6>Heading 6</h6> <h1 style="font-family:verdana;">This is a heading</h1>
<h1 style="font-size:160%;">This is a paragraph.</h1>

HTML Paragraphs CSS
•A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
<p>This is a paragraph.</p> <p style="background-color:tomato;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<p style="color:red;">This is a paragraph.</p>
<p style="text-align:center;">Centered Heading</p>
<p style="font-family:verdana;">This is a heading</p>
<p style="font-size:160%;">This is a paragraph.</p>

HTML Colors

PDF HTML

Uploaded by

Copyright:

Available Formats

PDF HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PDF HTML

Uploaded by

Copyright:

Available Formats

What is HTML?

•HTML stands for Hyper Text Markup Language

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.

<h1>Heading 1</h1> Align = Left, Right, Center, Justify

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

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Open image in firefox browser & copy the location

Ordered HTML List

<h1>Heading 1</h1> <h1 style="font-size:60px;">Heading 1</h1>

<h1 style="font-size:160%;">This is a paragraph.</h1>

<p style="font-family:verdana;">This is a heading</p>

<p style="font-size:160%;">This is a paragraph.</p>

You might also like