1 / 26

Building Websites with HTML Essentials

Learn HTML basics, web editors, import content, markup structure, HTML document elements, and more. Discover the foundation for creating web pages.

bweller
Download Presentation

Building Websites with HTML Essentials

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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 • 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 • http://www.oamk.fi/~teraisan/K1047BI/Examples/ • 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 • 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

  24. 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://xxx@yyy.fi”>E-mail</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 -->

More Related