Scribd
Upload
6 views56 pages

03-01 HTML

Uploaded by

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

03-01 HTML

Uploaded by

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

Dr.

Heba Zaki
[email protected]

Eng. Hager Mahmoud


[email protected]
Definition of HTML
O HTML is the authoring
language used to create
documents on the web.
O It is used to define the structure
and layout of a web page, how
a page looks, and any special
functions.

2
O HTML does this by using what are
called tags (< />) that have
attributes.
O Ex: <p> </p> means a paragraph.
O As the viewer of a web page, you
don't see HTML; it is hidden from
your view. You see only the results.
O File extension must be (.htm or .html)
to be interpreted by The browser. 3
4
5
Go
HTML file
O The <!DOCTYPE> declaration
represents the document type,
and helps browsers to display
web pages correctly.
O It must only appear once, at
the top of the page (before
any HTML tags).
O <html lang="en">
(lang="en-US“)
<head>…</head>
<body>...</body> 6
</html>
7
Let’s do this example

8
HTML Element
O An HTML element is defined by
opening tag, some content, and
closing tag.
O <tagname>Content goes
here...</tagname>

9
<br>: The Line
Break element
O It produces a line break in text. It is
useful for writing a poem or an
address, where the division of lines
is significant.
O This element has no content . It is
called empty element.
O Empty elements also do not have an
end tag!
O It can be written <br/> OR <br>
10
HTML Attributes
O All HTML elements can have
attributes
O Attributes provide additional
information about elements
O Attributes are always specified in
the start tag and come in
name/value pairs like:
name="value"

11
0

12
Multi-valued attributes

13
14
Heading tag

15
Paragraph tag

16
Paragraph tag
O <p style="color:red;">This is a red
paragraph.</p>
O <p title="I'm a tooltip">This is a
paragraph.</p>
O Title attribute appears in the browser
when put the cursor on the paragraph

17
Div and span tags
O div and span tags are elements used to define
division or a section of a document.
O They can easily identified or styled by using the
class or id attribute
O <div id=“Desc">
O <h1>Welcome to our Bioservers Course</h1>
O <p > course description </p >
O </div>
O Note: By default, browsers always place a line
break before and after the <div> element.

18
Text Formatting Tags
Tag Produces
<b> bold </b> bold text
<i> italic </i> italic text
<u> underline </u> underlined text
<font example
color=“green”>
example </font>
<ul><li>one</ • one
li><li>two</li></ • two
u>
19
<hr /> -----------------------
-
Image tag

20
Image tag
O <img src="img_girl.jpg“ alt="Girl with
a jacket“ width="500" height="600">
(pixels)
O src="/images/img_girl.jpg".
O src="https://
static.pubmed.gov/portal/portal3rc.fcgi/4199
695/img/67327.jpg".

21
Link tag

22
Link tag
O <a href="https://
www.ncbi.nlm.nih.gov/">Visit
NCBI</a>
O <a href="#tips">go to tips
section</a>
O <p id="tips">useful tips</p>
O The id global attribute defines an
identifier (ID) which must be unique in the
whole document. Its purpose is to identify
the element when linking (using a 23
fragment identifier), scripting, or styling
(with CSS).
Table tag
O <table> Defines a table
O <caption> Defines table
title(name)
O <th> Defines table header.
O <tr> Defines table row.
O <td> Defines table
data/cell.
O <th> elements are bold
and centered.
O <td> elements are regular
and left-aligned. 24
Table tag

25
Comment Tags

26
d

27
28
Id attribute
O <a id=“tips”>useful tips</a>
O <a href=“#tips”>go to tips
section</a>
O The id global attribute defines
an identifier (ID) which must be
unique in the whole document.
O Its purpose is to identify
the element when linking
(using a fragment identifier),
scripting, or styling (with
CSS) 29
Class attribute
O <div class= “contents”>
<p></p>
</div>
O The class attribute is mostly
used to point to a class in a
style sheet.
O However, it can also be used
by a JavaScript (via the HTML
DOM) to make changes to
HTML elements with a
specified class. 30
Style, Title, Lang
attributes
O <p style="color:red;">This is a
red paragraph.</p>
O <p title="I'm a tooltip">This is
a paragraph.</p>
O <!DOCTYPE html>
<html lang="en"> (lang="en-
US“)
<body>...</body>
</html> 31
Href and image
attributes
O <a href="https://
www.w3schools.com">Visit
W3Schools</a>
O <img src="img_girl.jpg“ alt="Girl
with a jacket“
width="500" height="600“/>
(pixels)
src="/images/img_girl.jpg".
src="https://www.NCBI.com/images/
img_girl.jpg" 32
HTML Element Reference
Tag Description
<!DOCTYPE> the document type
<a> a hyperlink
<b> bold text
<body> the document's body
<br> a single line break
<button> a clickable button
<col> Specifies column properties for
each column
<div> a section in a document
<h1> to <h6> HTML headings
<html> the root of an HTML document 33
Element Reference
Tag
(cont.)
Description
<header> a header for a document or
section
<img> an image
<table> a table
<tr> a row in a table
<title> a title for the document
<style> style information for a
document
<script> a client-side script
34
<link> a link between a document
and an external resource
35
36
CSS
O Cascading Style Sheets (CSS) is a

style sheet language used for


describing the presentation of a
document written in a markup
language such as HTML.

37
Types of CSS
OInline
OInternal
OExternal

1. Inline :
O <h1 style= "color:red" > this is h1
heading <h1/>
Result: this is h1 heading
38
2. Internal CSS
O Used to define a style for a single HTML
page.
O Defined in the <head> section of an HTML
page, within a <style> element.
O Commonly used CSS properties:
O color: blue;
O background-color: red
O font-family: verdana;
O border: 2px solid powderblue;
O padding: 30px;
O margin: 50px;
39
O font-size: 30;
Internal CSS

40
3. External CSS
O Used to define the style for

many HTML pages.


O To use an external style sheet,

add a <link> tag to it in


the <head> section of each
HTML page.
O With an external style sheet, you

can change the look of an entire


web site, by changing ONLY one
41
file!
External CSS

styles.css

42
How css is inserted

Internal
Style
Sheet

43
Inline
Style
Sheet
Style for Table

44
Special Style for One
Table

45
46
47
https://validator.w3.org

48
49
https://jigsaw.w3.org/css-
validator

50
51
52
Basic html template
O Open an empty html file, then

write ! , and press tab 

53
Meta tag  charset
Covers only
english
characters

Can represent
almost all
characters in
the world
54
Other meta elements

55
56

You might also like