Download presentation
Presentation is loading. Please wait.
1
Teppo Räisänen LIIKE/OAMK 2010
HTML Basics Teppo Räisänen LIIKE/OAMK 2010
2
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
3
Web Editors In our school computers we should have DreamWeaver
Programmer’s Notepad
4
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
5
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
6
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
7
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
8
HTML Markup Please have a look the helloworld.html file at
Open the file in your browser and select view source from the menu
9
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
10
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
11
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>
12
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 Thus it has no content We can write either <br></br> or <br /> We normally use <br /> because it is shorter
13
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"
14
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” />
15
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)
16
HTML General structure of a HTML document is usually
html start tag: <html> head element body element html end tag: </html>
17
HEAD Includes information about the page: TITLE META SCRIPT STYLE
18
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>
19
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
20
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)
21
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
22
UL, OL, LI (Lists, List Items)
<ul> = unordered list Marked with ● in the beginning <ol> = ordered list Market with numerical ordering 1,2,3… Inside lists the actual list items are marked using <li>Item</li>
23
A (Link) (1) A Link can point to
File resource Internet address An anchor inside a page 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
24
A (Link) (2) The actual appearance of a link is affected by Examples:
Browser settings Web page’s settings Style definitions Examples: <a href=” <a
25
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” />
26
Comments HTML comments are written using <!-- comment -->
Similar presentations
