HTML Day1
presented by: Asmaa Ahmed
Content
HTML Quotation
HTML Introductio HTML Comments
n HTML Links
HTML Documents
HTML Block and
Inline Elements
HTML Elements
HTML Lists
HTML Attributes
HTML Iframe
HTML Headings
HTML Paragraphs
HTML Styles
HTML Text
2 Formatting
HTML Introduction
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.
3
HTML Page Structure
◆ <html><head><title>Page title</title>
◆ </head>
◆ <body>
◆ <h1>This is a heading</h1>
◆ <p> Some text..</p>
◆ <p>Some text...</p>
◆ </body>
◆ </html>
4
HTML Elements
◆ An HTML element is defined by a start tag, some
content, and an end tag.
◆ <tagname>Content goes</tagname>
Examples of some HTML elements:
◆ <h1>My First Heading</h1>
◆ <p>My first paragraph.</p>
5
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"
6
HTML Attributes
◆ The href Attribute:
<a href="[Link] Google</a>
◆ The src Attribute:
<img src="[Link]">
◆ The width and height Attributes
<img src="[Link]" width="500" height="600">
◆ The alt Attribute
<img src="[Link]" alt=“Any text">
◆ The lang Attribute: <html lang="en">……</html>
[Link]
7
HTML Attributes cont..
◆ The title Attribute
<p title="I'm a paragraph ">This is a paragraph.</p>
8
HTML Headings
◆ HTML headings are titles or subtitles that you want to display on a
webpage.
◆ HTML headings are defined with the <h1> to <h6> tags.
◆ <h1> defines the most important heading. <h6> defines the
least important heading.
9
HTML Headings
◆ HTML headings are titles or subtitles that you want to display on a
webpage.
◆ HTML headings are defined with the <h1> to <h6> tags.
◆ <h1> defines the most important heading. <h6> defines the
least important heading.
10
HTML Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
11
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>
12
HTML Paragraphs
◆ HTML Horizontal Rules:
The <hr> tag defines a thematic break in an HTML page, and is most
often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in
an HTML page : <p>This is some text.</p><hr><p>This is some
other text.</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: <p>This is<br>a paragraph<br>with line breaks.</p>
13
HTML Paragraphs
◆ The HTML <pre> element defines preformatted text.
◆ The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
<pre>
some text..
some text.
</pre>
14
HTML Styles
◆ The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
◆ The HTML style attribute has the following syntax:
<tagname style="property:value;">
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
15
HTML Text Formatting
Formatting elements were designed to display special types of text:
◆ <b> - Bold text
◆ <strong> - Important text
◆ <i> - Italic text
◆ <em> - Emphasized text
◆ <mark> - Marked text
◆ <small> - Smaller text
◆ <del> - Deleted text
◆ <ins> - Inserted text
◆ <sub> - Subscript text
◆ <sup> - Superscript text
16
HTML Quotation
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the
author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from
another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
17
HTML Comments
HTML comments are not displayed in the browser, but they can help document
your HTML source code:
◆ <!-- Write your comments here -->
18
HTML Links
HTML comments are not displayed in the browser, but they can help document
your HTML source code:
◆ HTML Links – Syntax
◆ <a href="url">link text</a>
◆ The target Attribute:
1-_self - Default. Opens the document in the same window/tab
as it was clicked
2-_blank - Opens the document in a new window or tab
3-_parent - Opens the document in the parent frame
4-_top - Opens the document in the full body of the window
19
HTML Links
Absolute URLs vs. Relative URLs:
◆ absolute URL (a full web address) in the href attribute
◆ relative URL (without the "[Link] a link to a page within the same
website: local link
<h2>Absolute URLs</h2>
<p><a href="[Link]
<h2>Relative URLs</h2>
<p><a href=“[Link]">HTML Images</a></p>
20
HTML Links
Image as a Link:
◆ To use an image as a link, just put the <img> tag inside the <a> tag:
◆ <a href="[Link]">
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address:
◆ <a href=" mailto: someone@[Link]">Send email</a>
Link Titles:
◆ <a href=" [Link] title="Go to Google">Visit
Google</a>
21
HTML Block and Inline Elements
◆ Block-level Elements:
A block-level element always starts on a new line and takes up the full
width available.
<div>Hello World</div>
◆ Inline Elements:
An inline element does not start on a new line and it only takes up as
much width as necessary.
<span>Hello World</span>
22
HTML Lists
Unordered HTML List:
◆ An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
◆ The list items will be marked with bullets (small black circles) by default:
Ordered HTML List:
◆ An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
◆ The list items will be marked with numbers by default
HTML Description Lists:
◆ HTML also supports description lists.
◆ A description list is a list of terms, with a description of each term.
◆ The <dl> tag defines the description list, the <dt> tag defines the term
23 (name), and the <dd> tag describes each term
HTML Lists
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
24
Unordered HTML List
Value Description
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
25
Ordered HTML List
Type Description
type="1" The list items will be numbered with
numbers (default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
26
HTML Iframes
◆ An HTML iframe is used to display a web page within a web page.
◆ 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.
<iframe src="url" title="description">
◆ Iframe - Set Height and Width:
◆ Use the height and width attributes to specify the size of the iframe.
◆ The height and width are specified in pixels
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"> </iframe>
27
Thanks!
Any questions?
28