Scribd
Upload
67 views

Computing Fundamentals Lab: UET Lahore

HTML is the standard markup language used to create web pages. HTML uses elements represented by tags to describe the structure of pages. A basic HTML document contains <html>, <head>, and <body> elements. The <head> contains metadata like the <title>. The <body> contains visible content like <h1> headings and <p> paragraphs. HTML tags come in pairs like <p> and </p> and are used by browsers to render web pages, though the tags themselves are not visible. HTML documents can be created and viewed using a simple text editor.

Uploaded by

Bilal Ahmad
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Computing Fundamentals Lab: UET Lahore

HTML is the standard markup language used to create web pages. HTML uses elements represented by tags to describe the structure of pages. A basic HTML document contains <html>, <head>, and <body> elements. The <head> contains metadata like the <title>. The <body> contains visible content like <h1> headings and <p> paragraphs. HTML tags come in pairs like <p> and </p> and are used by browsers to render web pages, though the tags themselves are not visible. HTML documents can be created and viewed using a simple text editor.

Uploaded by

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

Computing Fundamentals Lab UET

Lahore

HTML
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page
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>
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the tag
name
Computing Fundamentals Lab UET
Lahore

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.
The browser does not display the HTML tags, but uses them to determine how to display the
document:

HTML Page Structure


Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Computing Fundamentals Lab UET
Lahore

HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

Making WebPage with HTML

Write HTML Using Notepad or TextEdit


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).
We believe using a simple text editor is a good way to learn HTML.
Follow the four steps below to create your first web page with Notepad or TextEdit.
Step 1: Write Some HTML
Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Computing Fundamentals Lab UET
Lahore

Step 3: 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).

Step 3: View the HTML Page in Your Browser


Open the saved HTML file in your favorite browser (double clicks on the file, or right-click - and
choose "Open with").
The result will look much like this:
Computing Fundamentals Lab UET
Lahore

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.google.com">This is a link</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:
Example
<img src="google.com/jpg" alt="google.com/jpg" width="104" height="142">
Computing Fundamentals Lab UET
Lahore

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

The href Attribute


HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="https:// www.google.com ">This is a link</a>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
Example
<img src="img_girl.jpg">
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height of the image:
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be displayed.
The value of the attribute can be read by screen readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.
Example
<p style="color:red">I am a paragraph</p>

HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
Computing Fundamentals Lab UET
Lahore
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Background Color
You can set the background color for HTML elements:
Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
You can set the color of text:
Hello World
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Computing Fundamentals Lab UET
Lahore
Color Values:

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values,
and HSLA values:
Same as color name "Tomato":
Same as color name "Tomato", but 50% transparent:%, 6.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

You might also like