Scribd
Upload
137 views

HTML Fundermentals

This document provides an introduction to HTML, covering topics such as: - What HTML is and some of its basic components like tags and markup languages - Common HTML tags like <html>, <head>, <body>, and others - How to structure an HTML document with the <head> and <body> sections - Basic HTML syntax like using angle brackets for tags and tag pairs - How browsers interpret HTML to display web pages - Adding images, text styling, and links to HTML pages

Uploaded by

Dana Popescu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
137 views

HTML Fundermentals

This document provides an introduction to HTML, covering topics such as: - What HTML is and some of its basic components like tags and markup languages - Common HTML tags like <html>, <head>, <body>, and others - How to structure an HTML document with the <head> and <body> sections - Basic HTML syntax like using angle brackets for tags and tag pairs - How browsers interpret HTML to display web pages - Adding images, text styling, and links to HTML pages

Uploaded by

Dana Popescu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML FUNDAMENTALS

SAMPSON
1

What is HTML?

HTML is a language for describing web pages.


HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML Tags
2

HTML markup tags are usually called HTML tags


HTML tags are keywords (tag names) surrounded by angle
brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is
the end tag
The end tag is written like the start tag, with a forward
slash before the tag name
Start and end tags are also called opening tags and closing
tags

Basics of HTML
2 ways to view a webpage
Web view is how the browser interrupts your code (how you
normally view web pages). The purpose of a web browser (like
Internet Explorer, Firefox, Chrome, etc) is to read HTML
documents and display them as web pages.

Source code view is the written text that is created by the web
designer. The source code for any webpage can be viewed .

HTML tags are written between angle brackets


(< >) and most tags will usually come in pairs like
<i> and </i>

Basics of HTML cont.


The first tag in a pair is called the opening
tag (<i> ) and the second is called the closing
tag (</i> **note the /)
The browser does not display the HTML
tags, but uses the tags to interpret the content of the
page.

Tags order matters! If you open the tags one way


then it must reverse when closed.
Example: <b><i>Hello World</i></b>

Tags are not case sensitive

Basics of HTML cont.


All HTML documents start with <HTML>
and end with </HTML>
Every HTML webpage has 2 sections which
are denoted by HTML tags
<Head>
<Body>

The Head section will always open & close


before the Body section opens

Basics of HTML Head


Section
Head section
This section always begins with <head> and
ends with </head>
This section will not be visible in the body of
the web browser
The name of the webpage that appears in the
title bar is placed in this section
Example: <title>My First Page</title>

Basics of HTML Body


Section

Body Section

Information displayed in this section will be displayed in


the body of the web browser

The closing body tag will always proceed the closing


HTML tag.

Basics of HTML Saving


How to save as HTML
File -> Save As -> (the name you want the file to
be).html
When you save as .html this tells the computer that
this file should be opened by a browser
If using a simple text editor, typing .html manually is
required
Example:
MyFirstPage.html
MyFirstPage.doc

- Will open as a webpage


- Will not open as a webpage

Basics of HTML
REVIEW
<html>
<head>
<title>
Webpage title
</title>
</head>
<body>
My first webpage
</body>
</html>

Starts every HTML


page
Info in this
section will not
appear in the
body of the web
browser
Info in this section
will appear in the
body of the web
browser
Ends every HTML
page

TRY THIS
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
11

Example Explained
The DOCTYPE declaration defines the document type
The text between <html> and </html> describes the web
page
The text between <body> and </body> is the visible page
content
The text between <h1> and </h1> is displayed as a
heading
The text between <p> and </p> is displayed as a paragraph

12

Flash Back

What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets like
<html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag
name
13
Start and end tags are also called opening tags and closing tags

Web Browsers
The purpose of a web browser (such as Google Chrome,
Internet Explorer, Firefox, Safari) is to read HTML
documents and display them as web pages.
The browser does not display the HTML tags, but uses the
tags to determine how the content of the HTML page is to
be presented/displayed to the user:

14

HTML Document Layout


Example of basic tag positioning
<html>
<head>
<title>Title bar text</title>
</head>
<body>
<p>Look, I'm a paragraph!</p>
</body>
</html>

Always think containers!


Tag pairs that enclose content

HREF (Hypertext REFerence) attribute


Makes a jump to someplace (URL)
<a href="mypage.htm">My Page</a>
<a href="www.google.com">Google</a>

Link text is underscored by default

Whatever is between <a> and </a>


is hot (clickable)
Clicking makes the link go somewhere
or do something
16

Images
Used in pages for various reasons
Clarification, navigation, peripheral training

Images not in page; referenced by page


Graphics are separate, required files
Usually GIFs or JPGs, sometimes others
Can be anywhere in document body: in paragraphs,
headings, lists, anchors, etc.

Place image with <img> tag


Like <a>, <img>

Images (2)
Main attribute: SRC

Tells page where to find the image


File name can be local, relative, or full
Case sensitivity depends on server
Animated GIFs added same as static

<img src="smiley.gif">
<img src="./pix/mypic.jpg">
<img src="http://www.myweb.com/mail.gif">

HTML Versions
Since the early days of the web, there have been many
versions of HTML:
Version
Year
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML 1.0
2000
HTML5
2012
XHTML5
2013
19

HTML Examples
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a
paragraph.</p>
</body>
</html>
20

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A
paragraph.</p>
</body>
</html>
21

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

22

Exercise
Create a webpage that prints your name to the screen. [See solution]
Create a webpage that prints the numbers 1 - 10 to the screen. [See
solution]
Create a webpage and set its title to "This is a webpage". [See
solution]
Create a webpage that prints the message "When was this webpage
created? Check page's title for the answer." to the screen, and set the
title of the page to the current date.[See solution]
Create a webpage that prints any text of your choosing to the screen,
do not include a head section in the code. [See solution]
Repeat exercise #5, but this time include a head section in the code.

23

<html>
<body>
<!-- print name to the screen -->
John
</body>
</html>
24

Print the numbers 1 - 10, each number


being a different color

25

<html>
<body>
<font color="green">1</font>
<font color="blue">2</font>
<font color="gray">3</font>
<font color="#008080">4</font>
<font color="#0008B">5</font>
<font color="brown">6</font>
<font color="#dcdcdc">7</font>
<font color="#800000">8</font>
<font color="purple">9</font>
<font color="#688e23">10</font>
</body>
</html>
26

EXERCISE
Lesson 1 Words: Create a simple page introducing yourself,
what you do, what you like and dislike.
Lesson 2 Lists: Modify the introduction to include a bullet list of
what you do and put list the 5 things you like most and dislike as
numbered lists.
Lesson 3 Simple Links: Create another page about your
favourite hobby, and link it to (and from) your main page.
Lesson 4 - More Advanced text: Center something, and put a quote
on one of your pages
Lesson 5 - Simple Images: Put an existing image on a web page.
Lesson 6 Tables : Create a table, use a heading
Lesson 7 Colours: Colour a page and some text within the page
Lesson 8 - Advanced Links: Link to another site
27

You might also like