Scribd
Upload
17 views43 pages

HTML 1

Uploaded by

layan8789609
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
17 views43 pages

HTML 1

Uploaded by

layan8789609
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 43

BIT 381

HTML5
HTML Introduction
• HTML is the standard markup language for creating Web
pages
• 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
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 that this document is an
HTML5 document.
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• 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.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
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>
• The HTML element is everything from the start tag to
the end tag:
<h1> My First Heading </h1>
<p> My first paragraph. </p>
HTML Editors
• Learn HTML Using Notepad or TextEdit
• Web pages can be created and modified by using professional HTML
editors like Notepad++, Visual Studio Code, CoffeeCup, Sublime Text
• However, for learning HTML we recommend a simple text editor like
Notepad (PC) or TextEdit (Mac).
• We believe in that using a simple text editor is a good way to learn
HTML.
• Save the HTML page ending with the extention .html
HTML Documents
• All HTML documents must start with a document 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>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and
helps browsers to display web pages correctly.
• It must only appear once, at the top of the page (before any HTML
tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
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>
<!DOCTYPE html>
<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 Paragraphs
• HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML Links
• HTML links are defined with the <a> tag:

• Example
<a href="https://www.yu.edu.jo"> This is a link</a>

• The link's destination is specified in the href attribute.


• Attributes are used to provide additional information about HTML
elements.
HTML attributes
• Syntax:
• name = “value”
1) The href attribute
• The <a> tag defines a hyperlink
• The href attribute specifies the URL of the page the link goes to

• Example
• <a href = https://www.yu.edu.jo”> visit Yarmouk University web page </a>
2) The src attribute
• The <img> tag is used to embed an image in an HTML page.
• The src attribute specifies the path of the image to be displayed on
the web page.
• Example: <img src = “…….path……”>
3) The width and height attributes
• The <img> tag should contain the width and height of the image in
pixels.
• Example:
• <img src= “……path…..” width=“200” height = “250”>
4) The alt attribute
• The alt attribute for the <img> tag specifies an alternate text for an
image , if the image for some reasons can not be displayed.
• Example:
• <img src="C:\Users\Qaisd\Desktop\Spring 2021\Examples at Home\petra.JFIF" width = "200" height = "250" alt = "PETRA Jordan" >
5) The style attribute
• The style attribute is used to add styles to an element, such as color,
font, size, and more.
• Syntax: <tagname style="property:value;">
Example:
• <P style = "color : blue ; font-size:25px" >
• Yarmouk University <BR>
• Dept of IT<BR>
• BIT381: Web Dev.
• </P>
• HTML supports 140 standard color names.
Some colors in HTML5
continue
The HTML Style Attribute

• <tagname style="property:value;">
• The property is a CSS property.
• The value is a CSS value.
• We will do more examples about CSS later
in this semester.
Background Color

• The CSS background-color property defines the background color for


an HTML element.
• Example
<body style="background-color:powderblue;">

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

</body>
Set background color for two
different elements:
• <body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>
Text Color
• <h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>


Fonts
• The CSS font family property defines the font to be used for an HTML
element:

• Example

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


<p style="font-family:courier;">This is a paragraph.</p>
Text Alignment
• The CSS text-align property defines the horizontal text alignment for
an HTML element:

• Example:
• <h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting

• HTML contains several elements for defining text with a special


meaning.
• Example

•This text is bold


•This text is italic
•This is subscript and superscript
HTML Formatting Elements
• <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
• HTML <b> and <strong> Elements
• The HTML <b> element defines bold text, without any extra
importance>

• The HTML <strong> element defines text with strong importance.


The content inside is typically displayed in bold.

• The HTML <em> element defines emphasized text. The content


inside is typically displayed in italic.
HTML <mark> Element

• The HTML < mark> element defines text that should be marked or
highlighted:
Example1
Example-2
Example-3
6) The lang attribute
• You should always include the lang attribute inside the <html> tag , to
declare the language of the web page.
• Example:
• <!DOCTYPE html>
• <HTML lang =“en”>
• ……..
• </HTML?
7) The title attribute
• The title attribute defines some extra information about an element.
• Example:
• <H1 title =" I am a tooltip"> This is a good example </H1>
HTML Comments

• HTML comments are not displayed in the browser, but they can help
document your HTML source code.
• Example:
• <!-- Write your comments here -->
• Notice that there is an exclamation point (!) in the start tag, but not in the
end tag.
• Example:
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
style Example
• <p style = "text-align:center ;background-color:powderblue;
color: red; font-size: 30px">
My Name is ------
</p>
HTML5 Document Example
Web Page

You might also like