4HTML Basics

Download Report

Transcript 4HTML Basics 

HTML Basics
Teppo Räisänen
LIIKE/OAMK 2010
Web Editors

Any text editor can produce HTML
markup


NotePad, WordPad, Pico…
The advanced editors include



Separate views for the markup and the
pages UI
Ready-made code segments (snippet)
Menu based commands for editing and
creation of the elements of a Web page
Web Editors

In our school computers we should
have


DreamWeaver
Programmer’s Notepad
Publishing Systems



Publishing systems are intended to
simplify the implementation of a Web
site
The Web content is provided using an
easy-to-understand Web-based tools
Publishing systems make content
providing easier, but they also restrict
the possibilities (creativity?) of Web
design
Importint Text Content to a
Web Page



Small text segments can be imported
using system’s clipboard
Some applications provide ”Save as a
Web Page” command
E.g. .pdf-documents can be converted
into HTML using a dedicated service
HTML Markup


Static Web pages are files having
.htm/.html file extension
The file extension of dynamic Web
pages depends on the language that
the page is created


E.g. .php, .asp, .xml
The files are – and must be - normal
text files
HTML Markup

The role of the HTML is to describe the
structure of a Web page



The length of a text row is not restricted
The browser will show the text rows
according to the size of the browser
window
Indents are used to make the markup
more readable, they don’t affect how
the page is displayed
HTML Markup

Please have a look the helloworld.html
file at


http://www.oamk.fi/~teraisan/K1047BI/Ex
amples/
Open the file in your browser and select
view source from the menu
The Structure of a HTML
Document

HTML documents consists of text and
HTML tags.



Example of tags are <html>, <h1> and
<p>
HTML tags can be written using small or
capital letters so <P> and <p> are the
same tag
Please always use tags with lower case
letters as newer versions of HTML require
this
The Structure of a HTML
Document




HTML tags are keywords 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
Start and end tags are also called
opening tags and closing tags
The Structure of a HTML
Document

Start tag, end tag and anything that is
between them form an HTML element



For example
<h1>Hello world</h1>
<p>this is a paragraph</p>
The Structure of a HTML
Document


If the content is empty we can shorten
the tag
<br> is the tag used to make a line
break


We can write either



Thus it has no content
<br></br> or
<br />
We normally use <br /> because it is
shorter
The Structure of a HTML
Document




HTML elements can have attributes
Attributes provide additional information
about an element
Attributes are always specified in the
start tag
Attributes come in name/value pairs
like: name="value"
The Structure of a HTML
Document


For example <img> is the tag that can
be used to display images
We need to tell where the image can be
found


We can use src attribute
<img src=”picture.jpg” />
HTML

The complete page is defined using
<html> page </html> tags



<html> must be the first tag
</html> must be the last tag
Attributes for the html element:


lang – language used
dir – direction of the text content (from left to
right or vice versa)
HTML

General structure of a HTML document
is usually
1
2
3
4
html start tag: <html>
head element
body element
html end tag: </html>
HEAD

Includes information about the page:




TITLE
META
SCRIPT
STYLE
TITLE
Included inside HEAD element
 Browsers use title’s content in the top
bar
 The title should be describing the
contents of the page, e.g.
<title>The History of the Internet</title>

BODY


The shown contents of a Web page is
described inside BODY element
Attributes



bgcolor = the color of the background
text = the default color of text
link = the default color of the links
P (Paragraph)



The text contents are usually divided
into paragraphs using P element
The browsers will create empty vertical
space between the paragraphs
Attribute

Align (left, right, center, justify)
H1 – H6 (Headers)



The header levels are meant to describe
the hiearachial structure of headers
Browsers will use different text styles to
separate the contents & levels of the
headers
Note: Headers should be used only to
describe header content, not to make
text size larger than usual
UL, OL, LI (Lists, List Items)

<ul> = unordered list


<ol> = ordered list


Marked with ● in the beginning
Market with numerical ordering 1,2,3…
Inside lists the actual list items are
marked using <li>Item</li>
A (Link) (1)

A Link can point to






File resource
Internet address
An anchor inside a page
E-mail address (via mail protocol)
The text contents of a link are marked
between <a>Text</a> tag pair
A href attribute is used to describe,
where the link points to
A (Link) (2)

The actual appearance of a link is
affected by




Browser settings
Web page’s settings
Style definitions
Examples:
<a href=”http://www.ouka.fi”>Oulu</a>
<a href=”mailto://[email protected]”>E-mail</a>
IMG (Image)


A .gif/.jpeg/.png image can be
embedded into a page using IMG
Attributes



Src = the source file of the image
Alt = the alternative text shown is the
image can not be found/loaded
E.g. <img alt=”kuva” src=”kuva.gif” />
Comments

HTML comments are written using
<!-- comment -->