Scribd
Upload
34 views

HTML 1

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text with instructions for displaying content. Some key HTML tags include <h1> for main headings, <p> for paragraphs, and <img> for inserting images. Web browsers read HTML documents and display them visually according to the tags.

Uploaded by

Hibba Tabeer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views

HTML 1

HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text with instructions for displaying content. Some key HTML tags include <h1> for main headings, <p> for paragraphs, and <img> for inserting images. Web browsers read HTML documents and display them visually according to the tags.

Uploaded by

Hibba Tabeer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

Introducing HTML

Basics
Hyper Text markup Language
History
• HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was
the first standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late
1999. Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.
HTML
• HTML, the markup language behind virtually every page of the World Wide Web
• Not a programming language, it is a markup language
• Mark up our text documents so that web browsers know how to display them
and to define hypertext links within them to provide navigation within or
between them
• Uses markup tags to describe web pages
• Tool
• HTML markup employ only ordinary keyboard characters, all you really need is a good
text editor to construct HTML pages
• Notepad
• Dreamweaver
• Provides line numbering and syntax highlighting
What is HTML?
• HTML is a language for describing web pages.
• HTML is a markup language for describing web documents (web
pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
Example Explained
• The DOCTYPE declaration defines the document type to be HTML
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the
document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page
content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> A Simple HTML Document </title>
</head>

<body>
<h1>My HTML Page</h1>
Welcome to my first page written in HTML.<br />
This is simply a text document with HTML markup to show some
words in <b>bold</b> and some other words in <i>italics</i>.
<br />
</body>
</html>
HTML
HTML Page Structure
HTML
• DOCTYPE element
• notify the browser of the “flavor” of HTML used in the document
• HTML 4.0 Transitional, a fairly forgiving version of the HTML specification that allows the use of some
earlier markup styles and structures in addition to the latest HTML 4.0 specifications
• <head> …</head>
• the document’s head section is used to store information about the document that is not to be
displayed in the browser window
• <title>…</title>
• the document title fulfils a number of functions, among them:
• Search engines often use the page title (among other factors) to help them decide what a page is about
• When you bookmark a page, it is generally saved by default as the document
• Title
• Most browsers, when minimized, display the title of the current document on their icon or taskbar button
• link, meta, and script elements
HTML
• <body>…</body>
• body of the document contains text to be interpreted and displayed to the user via the browser window
• Bold
• Italics
• Headings
• Line break
• Horizontal line
• Adding Attributes to HTML Tags
<body bgcolor=”#cccccc”>
… page content goes here …
</body>
• Images
<img src=”myimagefile.jpg” border=”2” width=”250” height=”175” />
• alt=”Description of Image”
• Tables
• <table>
• Hyperlinks
• A hyperlink can contain images as well as text
HTML Basic Examples
• All HTML documents must start with a 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>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings

• HTML headings are defined with the <h1> to <h6> tags:

<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
HTML Headings
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading.
Headings Are Important
• Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
• Search engines use your headings to index the structure and content
of your web pages.
• Users skim your pages by its headings. It is important to use headings
to show the document structure.
• h1 headings should be main headings, followed by h2 headings, then
the less important h3, and so on.
HTML Horizontal Rules

• The <hr> tag creates a horizontal line in an HTML page.


• The hr element can be used to separate content:
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
<html>
<body>

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

</body>
</html>
HTML Display(Formatting and Fonts)
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different
results.
• With HTML, you cannot change the output by adding extra spaces or
extra lines in your HTML code.
• The browser will remove extra spaces and extra lines when the page
is displayed.
• Any number of spaces, and any number of new lines, count as only
one space.
HTML Paragraphs
• HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different results.
• With HTML, you cannot change the output by adding extra spaces or
extra lines in your HTML code.
• The browser will remove extra spaces and extra lines when the page is
displayed.
• Any number of spaces, and any number of new lines, count as only one
space.
Example

<html> <p> <p>


<body> This paragraph The number of lines in a paragraph
<p> contains a lot of depends on the size of the browser
This paragraph spaces window. If you resize the browser
window, the number of lines in this
contains a lot of lines in the source code, paragraph will change.
in the source code, but the browser </p>
but the browser ignores it.
ignores it.
</p>
</p>
HTML Line Breaks
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line) without starting a new
paragraph:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
Formatted Text
Tag Format
<i>….</i> Italic
<b>…</b> Bold
<tt>….</tt> Typewriter effect
<em>……</em> emphasis
<blink>……</blink> Blinking
<sup>….</sup> superscript
<sub>……. </sub> subscript
<u>……</u> underline
<strike>strikethrough</strike>(<del>) strikethrough
Nonbreaking Spaces
• Suppose you want to use the phrase "12 Angry Men." Here you would
not want a browser to split the "12, Angry" and "Men" across two
lines:
• An example of this technique appears in the movie "12 Angry Men."
• In cases where you do not want the client browser to break text, you
should use a nonbreaking space entity &nbsp; instead of a normal
space. For example, when coding the "12 Angry Men" in a paragraph,
you should use something similar to the following code:
HTML Fonts
• Fonts play very important role in making a website more user friendly
and increasing content readability. Font face and color depends
entirely on the computer and browser that is being used to view your
page but you can use HTML <font> tag to add style, size, and color to
the text on your website. You can use a <basefont> tag to set all of
your text to the same size, face, and color.
• The font tag is having three attributes called size, color, and face to
customize your fonts. To change any of the font attributes at any time
within your webpage, simply use the <font> tag. The text that follows
will remain changed until you close with the </font> tag. You can
change one or all of the font attributes within one <font> tag.
Font attribute
• Size
• Face
• Color
Back ground Color
<bgcolor>
HTML Elements
• HTML elements are written with a start tag, with an end tag, with
the content in between:
• <tagname>content</tagname>
• The HTML element is everything from the start tag to the end tag:
• <p>My first HTML paragraph.</p>
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>
HTML Attributes
• Attributes provide additional information about HTML elements.

• HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"
Example of Attributes
• The title Attribute
• HTML paragraphs are defined with the <p> tag.
• In this example, the <p> element has a title attribute. The value of the
attribute is "About W3Schools":
HTML Attributes
• Below is an alphabetical list of some attributes often used in HTML:
Attribute Description

alt Specifies an alternative text for an image


disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)

value Specifies the value (text content) for an input element.

Align To specify the place of the text of tag.


HTML Styles
• Every HTML element has a default style (background color is white and text color is
black).
• Changing the default style of an HTML element, can be done with the style attribute.
• This example changes the default background color from white to lightgrey:
• <!DOCTYPE html>
• <html>
• <body style="background-color:lightgrey">
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
The HTML Style Attribute
• The HTML style attribute has the following syntax:
• style="property:value“
<html>
<body>
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
</body>
</html>
Style Tasks
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
HTML Fonts
The font-family property defines the font to be used for an HTML
element:
<html>
<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>
</html>
HTML Text Size
The font-size property defines the text size to be used for an HTML
element:
<html>
<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>
</html>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an
HTML element
<html>
<body>
<h1 style="text-align:center">Centered heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text Formatting Elements
• Text Formatting
• This text is bold

This text is italic

This is superscript
HTML Formatting Elements
In the previous slide, you learned about HTML styling, using the
HTML style attribute.
HTML also defines special elements, for defining text with a
special meaning.
HTML uses elements like <b> and <i> for formatting output,
like bold or italic text.
Formatting elements were designed to display special types of text:
Home Task
• Bold text <b>
• Important text <strong>
• Italic text <i>
• Emphasized text <em>
• Marked text <mark>
• Small text <small>
• Deleted text <del>
• Inserted text <ins>
• Subscripts <sub>
• Superscripts <sup>
HTML Comments
• you can add comments to your HTML source by using the following
syntax:
<html>
<body>
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</body>
</html>
HTML Comments
Note: There is an exclamation point (!) in the opening tag, but not in
the closing tag.
Comments are not displayed by the browser, but they can help
document your HTML.
With comments you can place notifications and reminders in your
HTML:
Test
• Validation service ( validator.w3.org )
– Checking a document’s syntax
• URL that specifies the location of the file
• Uploading a file to the site
• http://validator.w3.org/#validate_by_upload
Home Task
• Made report on Marquee Tag.
• Resource
• http://www.w3schools.com
• http://www.tutorialspoint.com

You might also like