Scribd
Upload
17 views

PDF HTML

Uploaded by

corecomputerlab
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

PDF HTML

Uploaded by

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

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.

<!-- -> Comments Not visible on Webpage: <!--- Your comments here -->
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

You might also like