Scribd
Upload
2 views

Intro HTML

This document provides an introduction to HTML, detailing its structure, tags, and how to create web pages with text, images, and links. It covers various HTML elements such as headings, text formatting, and form controls, along with examples and coding challenges. Additionally, it explains attributes for styling and organizing content on web pages.

Uploaded by

snippyjohn24
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Intro HTML

This document provides an introduction to HTML, detailing its structure, tags, and how to create web pages with text, images, and links. It covers various HTML elements such as headings, text formatting, and form controls, along with examples and coding challenges. Additionally, it explains attributes for styling and organizing content on web pages.

Uploaded by

snippyjohn24
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 56

Introduction to

HTML
Introduction-
Video
• HTML, otherwise known
as HyperText Markup
Language, is the
What language used to create
is Web pages
• Using HTML, you can
HTML create a Web page with
? text, graphics, sound,
and video
The essence of HTML
programming is tags

A tag is a keyword
Tags enclosed by angle brackets
(Example: <I> )

There are opening and


closing tags for many but
not all tags; The affected
text is between the two
tags
Whenever you have
HTML tags within other
HTML tags, you must
close the nearest tag
first
Nested
Tags
Example:

<H1> <I> The


Nation </I> </H1>
Structure of a Web Page

• All Web pages share<HTML>


a common structure<HEAD>
<TITLE> Example </TITLE>
• All Web pages </HEAD>
should contain a <BODY>
pair of <HTML>, This is where you would include
<HEAD>, the text and images on your Web
page.
<TITLE>, and
</BODY>
<BODY> tags
</HTML>
Choose the title of your
Web page carefully; The
title of a Web page
determines its ranking
in certain search
engines
The
<TITLE
> Tag
The title will also
appear on Favorite
lists, History lists, and
Bookmark lists to
identify your page
Manipulating text in
HTML can be tricky;
Oftentimes, what you
see is NOT what you
get
Text
Formatt
ing For instance, special
HTML tags are
needed to create
paragraphs, move to
the next line, and
create headings
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
Text <P> New Paragraph </P>
Formatti
<BR> Next Line
ng Tags
Cod Code a webpage that shows
the Title as “Welcome to my
e Webpage”.

Time Sho Show “I love programming!”

For A w in Bold

Code
Challen Sho Show “I study in DPS

ge!! w Sharjah” in Italics

Sho Show “I am in Grade 7”


w Underlined
The expression
<FONT FACE =
“fontname”> …
</FONT> can be
used to change the
Changi font of the enclosed
ng the text
To change the size
Font of text use the
expression <FONT
SIZE=n> ….
</FONT> where n
is a number
between 1 and 7
To change the color, use
<FONT
COLOR=“red”>….
</FONT>.
Changi
ng the These attributes can be
combined to change the
Font font, size, and color of
the text all at once; For
example, <FONT SIZE=4
FACE=“Courier”
COLOR=“red”> ….
</FONT>
Time • Print your full name
For A with font “Tahoma” with
Code what you learnt in the
previous slide.
Challen
ge!!
Web pages are typically
organized into sections
with headings; To
create a heading use
the expression
<Hn>….</Hn> where
n is a number between
Headi 1 and 7
ngs In this case, the 1
corresponds to the
largest size heading
while the 7
corresponds to the
smallest size
The ALIGN
attribute can be
inserted in the <P>
and <Hn> tags to
right justify, center,
Aligni or left justify the
ng text
For example, <H1
ALIGN=CENTER>
Text The New York
Times </H1> would
create a centered
heading of the
largest size
Show “Welcome
to my webpage”
Time in the biggest
For A font.
Code
Show “I love
Challen
HTML” in the 2nd
ge!!
biggest font
aligned in the
center.
Comment statements are
notes in the HTML code
that explain the
important features of the
code
The comments do not
Comme appear on the Web page
nt itself but are a useful
Stateme reference to the author
of the page and other
nts programmers
To create a comment
statement use the <!--
…. --> tags
Time For A Code
Challenge!!

• Make a simple webpage of YOUR choice


and
• Show a comment in your code “I love
programming, here is my code”
To define the
background color,
use the BGCOLOR
attribute in the
Page <BODY> tag
Formatt
ing To define the text
color, use the TEXT
attribute in the
<BODY> tag
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black”
Examp TEXT=“white”>

le This is where you would


include the text and images
on your Web page.
</BODY>
</HTML>
Time • Make a simple webpage
For A And
Code • Put the background
Challen color “yellow”.

ge!!
• Type <IMG SRC =
“image.ext”>, where
image.ext indicates the
location of the image file
Inserti • The WIDTH=n and
HEIGHT=n attributes
ng can be used to adjust the
Image size of an image
• The attribute BORDER=n
s can be used to add a
border n pixels thick
around the image
Time • Make a simple webpage
For A of your choice

Code And

Challen • Insert the school logo


ge!!
• A link lets you move from
one page to another, play
movies and sound, send
email, download files,
and more….
• A link has three parts: a
Links destination, a label,
and a target
• To create a link type
<A HREF=“page.html”>
label </A>
• To create a link to DPS
Sharjah, I would type:
Examp <A
HREF=“http://website.dps
le: sharjah.com”>DPS
Sharjah</A>
Links
• The LINK, VLINK, and
ALINK attributes can be
inserted in the <BODY>
tag to define the color of
Changi a link
ng the • LINK defines the color of
links that have not been
Color visited
• VLINK defines the color of
of links that have already
Links been visited
• ALINK defines the color of
a link when a user clicks
on it
Time • Make a simple webpage
and insert link to DPS
For A Sharjah website VLINK
Code “yellow” , ALINK
Challen “purple”.
ge!!
LET US
SUMMARIZE!
Let us revise

• https://www.w3schools.com/html/exercis
e.asp?filename=exercise_html_attribute
s3
• https://www.w3schools.com/html/exercis
e.asp?filename=exercise_html_headings
1
Let’s
Reflect
• Give the name of one HTML editor program
• 7. What 2 file extensions can you use to save an HTML file?
• 8. How would you set up a link in HTML to http://website.dpssharjah.com
(* include everything from the open a tag to the close a tag)
• 10. What does the <body> tag/element define?
• 11. What does the <html> tag/element define?
• 12. What does <br/> do? This is an example of what kind of element?
• 18. What are the three default looks of a link on the Web?
• An unvisited link is underlined and __________________________.
• A visited link is underlined and __________________________.
• An active link is underlined and __________________________.
• 19. Provide an example of three tags which can be placed in between the <head>
and </head> tag.
• There are different types of
form controls that you can
use to collect data using
HTML HTML forms:
Form • Text Input Controls
Control • Checkboxes Controls
s • Radio Box Controls
• Clickable Buttons
• Submit and Reset Button
Types of text input
controls
Example
<html>
<body> Output
<form>
First name:<input
type="text"name="first_nam
e"><br>
Last name:<input
type="text"name="last_name
">
</form>
</body>
</html>
Time
For A • Make a webpage of your
choice single line input
Code controls.
Challen
ge!!
Example Output
<html>
<body>
<form>
User ID:<input
type="text"name="user_id"
><br>
Password:<input
type="password"name="pa
ssword">
</form>
</body>
</html>
Time
For A • Create a login page with
2 input boxes for User ID
Code and Password.
Challen
ge!!
Example
<html>
<body>
<form>
Description:<br><textarea rows="5" cols="50"
name="description">
Enter description here..</textarea>
</form> Output

</body>
</html>
Time
For A • Make a description box
Code of your choice

Challen
ge!!
Example

<html>
<body>
<form>
<input
type="checkbox"name="checkbo
x1"value="Maths"checked>Maths
<input
type="checkbox"name="checkbo
x2"value="Physics">Physics
</form>
</body>
</html>
Time
• Make any 3 check box of
For A your choice.
Code
Challen
ge!!
Example
<html>
Output
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input
type="radio"name="subject"value="maths"
>Maths
<br>
<input
type="radio"name="subject"value="physics
" selected>Physics
</form>
</body>
</html>
Time
For A • Make any 3 radio boxes
Code of your choice

Challen
ge!!
• Example:
output
<html>
<body>
<form>
<select name="subject">
<option value="Maths">Maths
</option><option value="Physics"selected>Physics
</option>
</select>
</form>
</body>
</html>
Time
For A • Make any 3 check boxes
Code of your choice.

Challen
ge!!
Example
<html>
<body>
<form>
<input
type="submit"name="submit"val
ue="Submit">
<input
type="reset"name="reset"value=
"Reset">
<input
type="button"name="ok"value="
OK">
<inputtype="image"name="imag
e
button"src="/html/images/logo.p
ng"/>
Time For A Code
Challenge!!
• Make a button control of your choice
Let's summarize
Thank you

You might also like