0% found this document useful (0 votes)
45 views

HTML Session: Hypertext Markup Language

Thank you for the HTML overview. Let me know if you have any other questions!

Uploaded by

Emad Elsaid
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
45 views

HTML Session: Hypertext Markup Language

Thank you for the HTML overview. Let me know if you have any other questions!

Uploaded by

Emad Elsaid
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML Session

HYPERTEXT MARKUP LANGUAGE

Instructor: Emad Elsaid


[email protected]
http://www.blazeboy.com
Agenda
2

What is HTML ?
Writing process
HTML layout
Basic HTML page
Text format tags
Image tag
Table tags
List tags
Anchor tag
What is HTML ?
3

HTML describe page structure not layout


HTML can link pages and embed content
HTML is text only file
HTML is not compiled
Only web browsers can view it
n
e r
g
r
w
t
e e
e
Writing process

v b
x
e
t
4

r b
y r
e
o
d
wr e
sa
rew
ref
i
ite ve
d s
sh
HTML text doesn’t have a layout
5

Linear unindented Indented (recom)


<html><head><title>untitled</t <html> <html>
itle></head><body>.....</body> <head> <head>
<title>untitled</title>
</html> <title>untitled</title>
</head>
</head> <body>
<body> .....
..... </body>
</body> </html>
</html>
HTML tags
6

HTML consist of tags inside other tags


<tag>…….</tag>
 Example1: <font>……</font>,<p>….</p>,
 Example2: <img />,<br />,<hr />
<tag1><tag2>…</tag2></tag1>
 Example: <font><p>….</p><i>….</i></font>
Make sure you close the first opening first
attributes
7

In order to determine tag properties you can add


attributes
<tag attribute1=“value” attribute2=“value”…></tag>
 Ex:1 <p align=“center” ></p>
 Ex2: <font color=“red” ></font>
Basic page
8

<html>
 <head>
 </head>
 <body>
 Hello world
 </body>
</html>
Text format tags
9

Paragraph: <p>
Header: <h1>…..<h6>
Font: <font>
Bold, Italics, Underline: <b>,<i>,<u>
Image tag
10

<img
 Src : source image
 Width: image width
 Height: image height
 Align: image alignment
Table tags
11

<table>
 <tr> : table row
 <th> : table header
 <td> : table cell
List tags
12

<ol> : Ordered list


<ul> : Unordered list
<li> : list item
Anchor tag
13

Anchore tag links between pages


You can make a download link for MP3 or image
<a>
 Href: reference page
 Title: tooltip text
Question
14

Question
Comments
Opinions

You might also like