Scribd
Upload
3 views67 pages

Web Design Using HTML

The document is a comprehensive guide to HTML, detailing its definition, structure, and importance in web design. It covers the history of HTML, its elements, attributes, and various formatting options, as well as practical examples for creating web pages. Additionally, it emphasizes the ease of learning HTML and its relevance for web development careers.

Uploaded by

ahadu3404
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
3 views67 pages

Web Design Using HTML

The document is a comprehensive guide to HTML, detailing its definition, structure, and importance in web design. It covers the history of HTML, its elements, attributes, and various formatting options, as well as practical examples for creating web pages. Additionally, it emphasizes the ease of learning HTML and its relevance for web development careers.

Uploaded by

ahadu3404
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/ 67

1

Web design using


HTML
By: Ashenafi Yizengaw

Addis Ababa, Ethiopia


2017 E.C
G-11
HTML Introduction
2

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
G-11
Why Learn HTML?
3

 Here are some common reasons to learn


HTML:
 Build Websites: Learning HTML can help you
pursue a career in web development.
 Customize Content: Allows you to edit or tweak
web pages, emails, or templates to fit your needs.
 Understand how the web works: This helps you
grasp how the internet works and how web pages
are structured.
 Employment Opportunities
 Learn Easily: HTML is beginner-friendly, making it
a great first step into the world of coding and
G-11
technology.
HTML History
4

 Currently, we are using HTML5, which is the


latest and most advanced version of HTML.
 HTML was initially created by Tim Berners-Lee in
1991 as a way to share and structure documents
on the web.
 The first-ever version was HTML 1.0, a basic and
limited version.

G-11
Why Learn HTML?
5
 An HTML editor is a software tool designed to help
users write and edit HTML code.
 Web pages can be created and modified by using
professional HTML editors.
 However, for learning HTML we recommend a
simple text editor like Notepad (PC) or TextEdit
(Mac).
 Other Example:
 Visual Studio Code (VS Code)
 Notepad++
 Eclipse
 Dreamweaver
 Komodo Edit
G-11

HTML Page Structure
6
Example Explained
 The <!DOCTYPE html> declaration
HTML Example defines that this document is an HTML5
document
<!DOCTYPE html>  The <html> element is the root element
<html> of an HTML page
 The <head> element contains meta
<head> information about the HTML page
 The <title> element specifies a title for
<title>Page Title</title> the HTML page (which is shown in the
</head> browser's title bar or in the page's tab)
 The <body> element defines the
<body> document's body, and is a container for
all the visible contents, such as headings,
<h1>My First Heading</h1>paragraphs, images, hyperlinks, tables,
<p>My first paragraph.</p>lists, etc.
 The <h1> element defines a large
</body> heading
 The <p> element defines a paragraph G-11
</html>
HTML Element
7

 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>

 Never Skip the End Tag:


 Some HTML elements will display correctly, even if
you forget the end tag:
E.g. <p>This is a paragraph

G-11
HTML Element
8

 Empty HTML Elements:


 HTML elements with no content are called empty
elements.
 The <br> tag defines a line break, and is an empty

element without a closing tag:


Example
<p>This is a <br> paragraph with a line break.</p>
 HTML is Not Case Sensitive:

 HTML tags are not case sensitive: <P> means the

same as <p>.
 The HTML standard does not require lowercase

tags, but the recommends lowercase in HTML. G-11


HTML Element
9

Nested HTML Elements


 HTML elements can be nested (this means that
elements can contain other elements).
 All HTML documents consist of nested HTML elements.
 The following example contains four HTML elements
(<html>, <body>, <h1> and <p>):
Example
 <!DOCTYPE html>s
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html> G-11
HTML Attributes
10

 HTML attributes provide additional information


about HTML elements.
 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“
The href Attribute
 The <a> tag defines a hyperlink. The href attribute
specifies the URL of the page the link goes to:
Example G-11
HTML Attributes
11

The src Attribute


 The <img> tag is used to embed an image in an HTML
page. The src attribute specifies the path to the image
to be displayed:
Example
<img src="img_girl.jpg">

The width and height Attributes


 The <img> tag should also contain
the width and height attributes, which specify the width
and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
G-11
HTML Attributes
12

The alt Attribute


 The required alt attribute for the <img> tag specifies
an alternate text for an image, if the image for some
reason cannot be displayed.
Example
<img src=“sample.jpg" alt=“sample image">

The style Attribute


 The style attribute is used to add styles to an element,
such as color, font, size, and more.
Example
 <p style="color: red;">This is a red paragraph.</p>
G-11
HTML Attributes
13

The lang Attribute


 You should always include the lang attribute inside the
<html> tag, to declare the language of the Web page.
This is meant to assist search engines and browsers.
Example
<html lang="en">
<html lang="en-US">

The title Attribute


 The title attribute defines some extra information about an
element.
 The value of the title attribute will be displayed as a tooltip
when you mouse over the element:
 Example: <p title="I'm a tooltip">This is a G-11
HTML Headings
14

 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.
Example
 <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 Headings Are Important for Search engines use theG-11
HTML Paragraphs
15

 A paragraph always starts on a new line, and is


usually a block of text.
 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>

G-11
HTML Styles
16

 The HTML style attribute is used to add styles to an


element, such as color, font, size, and more.
 Setting the style of an HTML element, can be done with
the style attribute.
 The HTML style attribute has the following syntax:
 <tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
 Example
 <body style="background-color:powderblue;">
 <h1 style="color:blue;">This is a heading</h1>
 <h1 style="font-family:verdana;">This is a heading</h1>
 <h1 style="font-size:300%;">This is a heading</h1>
 <h1 style="text-align:center;">Centered Heading</h1>G-11
HTML Text Formatting
17

 HTML contains several elements for defining text with a


special meaning.
 Formatting elements were designed to display special
types of text:
 <b> - Bold text <b>This text is bold</b>
 <strong> - Important text

<strong>This text is strong</strong>


 <i> - Italic text <i>This text is italic</i>

 <em> - Emphasized text <em>This text is


emphasized</em>
 <mark> - Marked text

<p>Do not forget to


buy <mark>milk</mark> today.</p>
 <small> - Smaller text
G-11
HTML Text Formatting
18

 <del> - Deleted text


<p>My favorite color is <del>blue</del> red.</p>
 <ins> - Inserted text
<p>My favorite color
is <del>blue</del> <ins>red</ins>.</p>
 <sub> - Subscript text
<p>This is <sub>subscripted</sub> text.</p>
 <sup> - Superscript text
<p>This is <sup>superscripted</sup> text.</p>

G-11
HTML Quotation and Citation
19
Elements
HTML <blockquote> for Quotations
 The HTML <blockquote> element defines a section
that is quoted from another source.
 Browsers usually indent <blockquote> elements.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html
">
For 60 years, WWF has worked to help people and nature
thrive. As the world's leading conservation organization, WWF
works in nearly 100 countries. At every level, we collaborate
with people around the world to develop and deliver innovative
solutions that protect communities, wildlife, and the places in
which they live.
</blockquote> G-11
HTML Quotation and Citation
20
Elements
HTML <q> for Short Quotations
 The HTML <q> tag defines a short quotation.
 Browsers normally insert quotation marks around the
quotation.
Example
<p>WWF's goal is to: <q>Build a future where people live in
harmony with nature.</q></p>
HTML <abbr> for Abbreviations
 The HTML <abbr> tag defines an abbreviation or an
acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
 Marking abbreviations can give useful information to
browsers
Example
G-11
p>The <abbr title="World Health Organization">WHO</abbr> was
HTML Quotation and Citation
21
Elements
HTML <address> for Contact Information
 The HTML <address> tag defines the contact information for
the author/owner of a document or an article.
 The contact information can be an email address, URL,
physical address, phone number, social media handle, etc.
 The text in the <address> element usually renders in italic,
and browsers will always add a line break before and after
the <address> element.
Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address> G-11
HTML Quotation and Citation
22
Elements
HTML <cite> for Work Title
 The HTML <cite> tag defines the title of a creative
work (e.g. a book, a poem, a song, a movie, a painting,
etc.).
 Note: A person's name is not the title of a work.
 The text in the <cite> element usually renders in italic.
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in
1893.</p>

HTML <bdo> for Bi-Directional Override


 BDO stands for Bi-Directional Override.
 The HTML <bdo> tag is used to override the current text
direction: G-11
HTML Comments
23

 HTML comments are not displayed in the browser, but


they can help document your HTML source code.
 You can add comments to your HTML source by using
the following syntax:
<!-- Write your comments here -->
 Notice that there is an exclamation point (!) in the start
tag, but not in the end tag.
Example
<p>This <!-- great text --> is a paragraph.</p>
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
 <!--<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
--> G-11
HTML Colors
24
 HTML colors are specified with predefined color names, or with
RGB, HEX, HSL, RGBA, or HSLA values.
Color Names
 In HTML, a color can be specified by using a color name:
Example:
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
Color Values
 In HTML, colors can also be specified using RGB values, HEX values,
HSL values, RGBA values, and HSLA values.
Example:
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1
G-11
CSS Colors
25
 Colors are specified using predefined color
names, or values( RGB, HEX, HSL, RGBA,
HSLA).
CSS Color Names
In CSS, a color can be specified by using a
predefined color name:
Example
<h1 style="color: white; background-color:
lightblue;">This is a heading</h1>
<p style="color: red;“>This is a paragraph.</p>

G-11
CSS Colors
26

RGB Colors
 An RGB color value represents RED, GREEN, and BLUE
light sources.
 In CSS, a color can be specified as an RGB value, using
this formula:
rgb(red, green, blue)
 Each parameter (red, green, and blue) defines the
intensity of the color between 0 and 255.
 For example, rgb(255, 0, 0) is displayed as red, because
red is set to its highest value (255) and the others are set
to 0.
 To display black, set all color parameters to 0, like this:
rgb(0, 0, 0).
 To display white, set all color parameters to 255, like this:
G-11
CSS Colors
27

RGBA Colors
 RGBA color values are an extension of RGB color
values with an alpha channel - which specifies the
opacity for a color.
 An RGBA color value is specified with:
rgba(red, green, blue, alpha)
 The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at all):
Example
 Experiment by mixing the RGBA values below:
style="background-color:rgba(255, 0, 0, 0.3);“
style="background-color:rgba(255, 0, 0, 0.9);"G-11
CSS Colors
28

HEX Colors
 A hexadecimal color is specified with: #RRGGBB,
where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of
the color.
 In CSS, a color can be specified using a
hexadecimal value in the form:
#rrggbb
 Hexadecimal values between 00 and ff (same as
decimal 0-255).
Example, #ff0000= red, #000000= black,
#ffffff= white
G-11
CSS Colors
29

HSL Colors
 HSL stands for hue, saturation, and lightness.
 In CSS, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
 Hue is a degree on the color wheel from 0 to 360. 0
is red, 120 is green, and 240 is blue.
 Saturation is a percentage value, 0% means a
shade of gray, and 100% is the full color.
 Lightness is also a percentage, 0% is black, 50% is
neither light or dark, 100% is white
G-11
CSS Colors
30

Example
style="background-color:hsl(0, 100%, 50%);"
style="background-color:hsl(240, 100%, 50%);“
style="background-color:hsl(147, 50%, 47%);“
style="background-color:hsl(300, 76%, 72%);“
style="background-color:hsl(39, 100%, 50%);“
style="background-color:hsl(248, 53%, 58%);"

G-11
CSS Colors
31

HSLA Value
 HSLA color values are an extension of HSL color
values with an alpha channel - which specifies the
opacity for a color.
 An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


 The alpha parameter is a number between 0.0

(fully transparent) and 1.0 (not transparent at all):


Example
style="background-color:hsl(0, 100%, 50%,0.2);“
style="background-color:hsl(39, 100%, 50%,0.8);“
style="background-color:hsl(248, 53%, 58%, 1.0);" G-11
NULL
32

 >

G-11
HTML Forms
33

The <form> Element


 HTML forms are used to collect user input.

 The <form> element defines an HTML form:

<form>
.
form elements
.
</form>
 HTML forms contain form elements.

 Form elements are different types of input

elements, checkboxes, radio buttons, submit


buttons, and more.
G-11
HTML Form Elements
34

1. The <input> Element


 The most important form element is the

<input> element.
 The <input> element can vary in many

ways, depending on the type attribute.


Example
<form>
User name:<br>
<input type="text" name=“Username"><br>
User password:<br>
<input type="password" name="psw">
</form> G-11
HTML Form Elements
35

2. The <select> Element (Drop-Down


List)
 The <select> element defines a drop-

down list:
Example
<select name="cars">
<option value=“BYD">BYD</option>
<option value=“Toyota">Toyota</option>
<option value=“Tasla">Tasla</option>
</select>

G-11
HTML Form Elements
36

3. The <textarea> Element


 The <textarea> element defines a multi-

line input field (a text area):


 Allows users to enter multiple lines of text.

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

G-11
HTML Form Elements
37

4. The <button> Element


 The <button> element defines a clickable

button:
 Creates a clickable button.

 Can be used to submit forms, trigger

JavaScript functions, or perform other


actions.
Example
<button type="button" onclick="alert('Hello
World!')">Click Me!</button>
G-11
HTML Form Elements
38

5. HTML <label> tag:


 Provides a label for an <input>, <select>,

<textarea>, or <button> element.


 Clicking on the label focuses on the

associated form control.


Example
<label for=“Username">Userame</label>
<input type="text" name=“Username">

G-11
HTML Form Elements
39

6. HTML5 <datalist> Element


 The <datalist> element specifies a list of

pre-defined options for an <input>


element.
 Users will see a drop-down list of pre-

defined options as they input data.


 The list attribute of the <input> element,

must refer to the id attribute of the


<datalist> element.

G-11
HTML Form Elements
40

Example
 An <input> element with pre-defined

values in a <datalist>:
 <form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
</datalist>
</form>
G-11
HTML Form Elements
41

7. HTML <fieldset>
 Groups related form elements together.

 Often used with <legend> to provide a

title or description for the group.


Example
<form>
<fieldset>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form> G-11
HTML Form Elements
42

8. HTML <legend>
 Provides a title or caption for a <fieldset>

element.
 Describes the purpose or content of the

grouped form elements.


Example
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text"> G-11
HTML Input Types
43

 Input Type: text


 <input type="text"> defines a one-line
input field for text input
Example
</form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>

G-11
HTML Input Types
44

 Input Type: password


 <input type="password"> defines a
password field
Example
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

G-11
HTML Input Types
45

 Input Type: submit


 <input type="submit"> defines a
button for submitting form input to a
form-handler.
 The form-handler is typically a server page
with a script for processing input data.
 The form-handler is specified in the form's
action attribute:

G-11
HTML Input Types
46

Example
<form action="">
First name:<br>
<input type="text" name="firstname"
value=“Nahom"><br>
Last name:<br>
<input type="text" name="lastname"
value=“Hailu"><br><br>
<input type="submit" value="Submit">
</form>

G-11
HTML Input Types
47

 Input Type: reset


 <input type="reset"> Define reset
button that will reset all form values to
their default values
Example
<form>
Search Google:
<input type="reset“ >
</form>

G-11
HTML Input Types
48

 Input Type: radio


 <input type="radio"> defines a radio
button.
 Radio buttons let a user select only one of
a limited number of choices
Example
<form>
<input type="radio" name="gender"
value="male"> Male<br>
<input type="radio" name="gender"
value="female"> Female<br>
G-11
</form>
HTML Input Types
49

 Input Type: checkbox


 <input type="checkbox"> defines a
checkbox.
 Checkboxes let a user select zero or
more options of a limited number of
choices.
Example
 <form>

<input type="checkbox" name="vehicle1"


value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2"
G-11
HTML Input Types
50

 Input Type: button


 <input type="button"> defines a
button.

Example
<form>
<input type="button" onclick="alert('Hello
World!')" value="Click Me!">
</form>

G-11
HTML Input Types
51

 Input Type: number


 <input type="number"> is used for
input fields that should contain a numeric
value.
 You can set restrictions on the numbers.
 Depending on browser support, the
restrictions can apply to the input field.
 Example
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1"
max="5"> G-11
HTML Input Types
52

 Input Type: date


 <input type="date"> is used for input
fields that should contain a date.
 Depending on browser support, a date
picker can show up in the input field.
Example
<form>
Birthday:
<input type="date" name="bday">
</form>

G-11
HTML Input Types
53

 Input Type: color


 <input type="color"> is used for input
fields that should contain a color.
 Depending on browser support, a color
picker can show up in the input field.
Example
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

G-11
HTML Input Types
54

 Input Type: range


 <input type="range"> is used for input
fields that should contain a value within a
range.
 Depending on browser support, the input
field can be displayed as a slider control.
Example
<form>
<input type="range" name="points" min="0"
max="10">
</form>
G-11
HTML Input Types
55

 Input Type: week


 <input type="week"> allows the user to
select a week and year.
 Depending on browser support, a date
picker can show up in the input field.
Example
<form>
Select a week:
<input type="week" name="week_year">
</form>

G-11
HTML Input Types
56

 Input Type: month


 <input type="month"> allows the user
to select a month and year.
 Depending on browser support, a date
picker can show up in the input field.
Example
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

G-11
HTML Input Types
57

 Input Type: time


 <input type="time"> allows the user to
select a time (no time zone).
 Depending on browser support, a time
picker can show up in the input field.
Example
<form>
Select a time:
<input type="time" name="usr_time">
</form>

G-11
HTML Input Types
58

 Input Type: datetime


 <input type="datetime"> allows the
user to select a date and time (with time
zone).
Example
<form>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>

G-11
HTML Input Types
59

 Input Type: email


 <input type="email"> is used for input fields that
should contain an e-mail address.
 Depending on browser support, the e-mail address

can be automatically validated when submitted.


 Some smartphones recognize the email type, and

adds ".com" to the keyboard to match email input.


 Example

<form>
E-mail:
<input type="email" name="email">
</form>
G-11
HTML Input Types
60

 Input Type: url


 <input type="url"> is used for input fields that
should contain a URL address.
 Depending on browser support, the url field can

be automatically validated when submitted.


 Some smartphones recognize the url type, and

adds ".com" to the keyboard to match url input.


Example
<form>
Add your homepage:
<input type="url" name="homepage">
</form> G-11
HTML Input Types
61

 Input Type: file


 <input type="file"> is used for file-
select fields and a ”Browse” button for file
uploads.
Example
<form>
My file :
<input type="file" name=“myfile">
</form>

G-11
HTML Input Attributes
62

 The value Attribute


 The value attribute specifies the initial value
for an input field:
Example
<form>
<label> First name: </label> <br>
<input type="text" name="firstname"
value="John">
<br>
<label> Last name: </label> <br>
<input type="text" name="lastname">
</form>
G-11
HTML Input Attributes
63

 The readonly Attribute


 The readonly attribute specifies that the
input field is read only (cannot be changed):
Example
<form>
<label> First name: </label> <br>
<input type="text" name="firstname"
value="John" readonly>
<br>
<label> Last name: </label> <br>
<input type="text" name="lastname">
</form>
G-11
HTML Input Attributes
64

 The disabled Attribute


 The disabled attribute specifies that the
input field is disabled.
 A disabled element is un-usable and un-
clickable.
 Disabled elements will not be submitted.
Example
<form>
<label> First name: </label> <br>
<input type="text" name="firstname" value="John"
disabled>
<br>
<label> Last name: </label> <br> G-11
HTML Input Attributes
65

 The size Attribute


 The size attribute specifies the size (in

characters) for the input field:


Example
<form>
<label> First name: </label> <br>
<input type="text" name="firstname"
value="John" size=“10">
<br>
<label> Last name: </label> <br>
<input type="text" name="lastname">
</form>
G-11
HTML Input Attributes
66

 The maxlength Attribute


 The maxlength attribute specifies the

maximum allowed length for the input field:


Example
<form>
<label> First name: </label> <br>
<input type="text" name="firstname"
value="John" maxlength="10“>
<br>
<label> Last name: </label> <br>
<input type="text" name="lastname">
</form>
G-11
HTML Input Types
67

G-11

You might also like