Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 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 Publishing systems 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 serviceservice

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 amples/ amples/ 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, and HTML tags can be written using small or capital letters so and 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 tags normally come in pairs like and 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 Hello world this is a paragraph

12 The Structure of a HTML Document If the content is empty we can shorten the tag is the tag used to make a line break Thus it has no content We can write either or We normally use 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 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

15 HTML The complete page is defined using page tags must be the first tag 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 1 html start tag: 2 head element 3 body element 4 html end tag:

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. The History of the Internet

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) = unordered list Marked with ● in the beginning = ordered list Market with numerical ordering 1,2,3… Inside lists the actual list items are marked using Item

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 Text 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 Browser settings Web page’s settings Style definitions Examples: Oulu

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.

26 Comments HTML comments are written using


Download ppt "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."

Similar presentations


Ads by Google