Ifi7174 lesson1

Download Ifi7174 lesson1

Post on 10-Apr-2017




1 download

Embed Size (px)



Hypertext Markup LanguageIFI7174.DT Lesson 1

OutlineHTML Basic conceptsBasic elementsTextListsHyperlinks and imagesTablesForms

2@ Sonia Sousa2015

ConceptsHTML is A markup language interpreted by Web browsersIt is spoken into 2 different ways CLIENT side a person (user) perspective who access to a Web site.SERVER side data storage perspective information/data that is stored in a computer (server) and later is distributed to clients (users)

Why?If we can generate HTML easilyFirst.... because you need Clean code to develop distributed interfacesSecond.... you need To have control over the codeWhat happen if some problem happens?How to fix it?Need to talk with a Professional Last you need confidence and competenceTo talk with developersTo be able toCreate a particular result Read or reuse the code, and "borrow" the effects.

Dreamweaver or wordpress

What HTML does?HTML defines the structure of the documentDocumentPages structureContent multimedia elementstext, lists, links, images, tables, and formsProvide the information needed for the browser to present the content to the user; anddefine What each element is..Heading paragraph list of items, a link, or an imageThis is due by adding markups < >

HTML and HTML5Added new semantic elementsHTML, , and HTML5Extra elements , , , , , , , Removed elements, , or

HTML and XHTMLXHTMLIs a Extensible HyperText Markup LanguageHTML Is a HyperText Markup LanguageHelps you to cope withDifferent browser technologiesIt combines HTML and XMLXML is EXtensible Markup LanguageDesigned to describe dataDemands for well-formed code

XHTMLMandatory DOCTYPE declaration Structure Attributes, , , and ElementsCorrectly nestedClosedLowercaseValues must be QuotedNo minimization attributes

Tools to useText editorCoda 2http://www.panic.com/coda/Notepad++https://notepad-plus-plus.orgAny text editor Notepad

Document Structure

Document structure

Heading of the text block
of text

sub Heading

What the browser show

HTML elements The opening/closing tags the closing tag is a "tag" also can be called an "element

= HTML = initiate page

= end page

HTML elements = HTML

= initiate page

= end page

informs the browser what type of letters the page is written in

Image path

greeny.cs.tlu.eePage2.htmlPage1.htmlIndex.htmlprint.tiffme.pngheader.jpgimagerootFolder structure

Same folderPage Inside folderPage outside folderPage

How to add imagesIn the same folder

in a subfolder of the page referencing it

somewhere else on the World Wide Web

Attributesalt adding an alternative description.width and height size frame the image.

Hyperlinks and imagesAn Hyperlinklink textCreate a bookmarkallow readers to jump to specific parts of a Web pagefirst create the bookmark my booksThen link it Where to find the tutorialHTML examples

Description :

First name:

Last name:

Example input text & submit

Add this form