01 - HTML Basics

7/31/2019 01 - HTML Basics

1/49

7/2/2012

1

WhatisHTML?

Gettingyoustarted

HTML standsfor.

Hyper

Text

MarkupLanguage

7/31/2019 01 - HTML Basics

2/49

7/2/2012

2

HTMLspecification

TheofficialtechnicalrulesofHTML

Definitions

Usageparametersofcompletetagset

Tagattributeset

Characterreferenceentities

Evolved

from

version

1.0

2.0 3.2 4.0 4.1

WhatDoWebBrowsersDo?

InterpretHTMLdocuments

DisplayHTMLdocuments

7/31/2019 01 - HTML Basics

3/49

7/2/2012

3

WhydosomeWebpageslook

differentin

different

browser?

Publishedextensions(unofficialadditions)areproducedbyotherspartiesotherthantheW3C

BecausetheextensionsdeviateawayfromtheofficialHTMLstandardtheycreatealackofconformityandareinterpretedbydifferentbrowsers

differently.

HTMLs4PrimaryConcepts

Publishinginformationviahypertextandhypermedia

Ascriptinglanguage(HTMLfamilytag)

Asoftwareapplicationtolocate,download,interpret

and

display

data

via

the

WWW.

Awebspecificdatatransferprotocol(HTTP:HyperTextTransferProtocol)

7/31/2019 01 - HTML Basics

4/49

7/2/2012

4

WhatisHypertext?

A way documents, files and multimedia

data are organized, navigated and

referenced through the Internet.

Tell the browser what to do, and what props

to use.

A series of tags that are integrated into a

text document.

Whyuseit?

Tomakealotofinformationavailableinoneplace

Makeinformationeasytolocate

Allowsmultiplywaystonavigatetowantedinformation

via

hyperlinks.

7/31/2019 01 - HTML Basics

5/49

7/2/2012

5

WhatisaHyperlink?

Avisiblenavigationalanchorthatpointsto(linksto)anothersourceofinformation(document,multimediaobject)

NOLimittoamountofhyperlinksinagiven

place

Hyperlinkcanonlylinktoonedocumentor

multimedia

file

NonlinearInformation???

Youdonthavetoreadfromstarttofinishfortheinformationtomakesense.

Youcanreadtheinformationyoudesireandclicklinkstobringyoutodifferentlocationsto

learnabout

something

else.

Nonlinear Nonhierarchical borderless:NOpredeterminedorder

7/31/2019 01 - HTML Basics

6/49

7/2/2012

6

WhatisHypermedia?

Hypertext+Multimediafiles(audio,videoandanimation)

Linkstostreameddata

HTMLisaScriptinglanguage?

Madeupoftagsthattellthebrowserwhatinformationtodisplay(content)andhowtodisplayit(format).

HTMLdocument=Webpage

Includescontent(wordsorpicturesonpage)

Includesinstructionsonhowtodisplayinfo.

7/31/2019 01 - HTML Basics

7/49

7/2/2012

7

Scriptinglanguagevs.

Programminglanguage

Programminglanguages(C++,Pascal,orJava)haveapplicationfilesandassociateddatafiles

ScriptingLanguage(a.k.a.markuplanguage,HTML)haveinstructions(HTMLtags)anddata(nontagHTMLdocumentcontent)arecontained

within

a

single

file.

HTTPHypertextTransferProtocol

ItprovidesastandardforWebbrowsersandserverstocommunicate.

TransferProtocolisamethodbywhichinfois

transferredbetween

a

server

computer

and

a

clientcomputeracrosstheinternet.

ThetransferprotocolyouspecifyinthelinkinanHTMLdocumentdeterminesthetypeofservertowhichyouarereferring

7/31/2019 01 - HTML Basics

8/49

7/2/2012

8

MajorTransferProtocols

ThetransferprotocolyouspecifyinthelinkinanHTMLdocumentdeterminesthetypeofservertowhichyouarereferring

Transfer

Protocol

Server Type URL Syntax

FTP FTP ftp://ftp.domain.com

HTTP Web http://www.domain.com

MailTo E-mail mailto: [email protected]

News Newsgroup News://news.domain.com

nntp://news.domain.com

WhatsanHTMLDocument?

Filesarchived(saved)onWebservers

MustbeASCIIfileformat(a.k.a.plaintextorDOS)

Maybeanybytecountsize

Mayassumeeitherportrait,landscape,acombinationofboth,orothernontraditionallayoutschemes;

Mayincludetwochiefelements:

1. HTMLscript(tags,tagattributesandcharacterentities)

2. nonHTMLcontent(text,images,ormultimedia)

7/31/2019 01 - HTML Basics

9/49

7/2/2012

9

HowtoCreateHTML

Document

Useanystandardtexteditor,wordprocessororHTMLeditor(MSFrontPage)

***MUSTsaveasASCIItext(plaintextorDOStext)

StructureofHTMLDocument

HTMLdocumentcontains2sections

HeadSection

BodySection

7/31/2019 01 - HTML Basics

10/49

7/2/2012

10

HeadSection

ProvidesbrowserswithspecificlogicaldatarelatedtotheWebpagesuchas:

Documenttitle

InformationinHeadsectiondoesNOTappearonWebpage.

BodySection

Containsalltheinfo.Thatisdisplayedinthebrowser.

Browserdoesnotrecognizeanymorethanasinglespacebetweencontentwords.

Browserwill

ignore

the

following:

Linebreaks

Paragraphbreaks

Multiplenonbreakinghorizontalspaces

7/31/2019 01 - HTML Basics

11/49

7/2/2012

11

HTMLBasicsHTML,Text,Images,Tables,Forms

TableofContents

1. IntroductiontoHTML

HowtheWebWorks?

WhatisaWebPage?

My

First

HTML

Page BasicTags:Hyperlinks,Images,Formatting

HeadingsandParagraphs

2. HTMLinDetails

TheDeclaration

TheSection:Title,Meta,Script,Style22

7/31/2019 01 - HTML Basics

12/49

7/2/2012

12

TableofContents(2)

TheSection

TextStylingandFormattingTags

Hyperlinks:

HyperlinksandSections

Images:

Lists:

,

and

HTMLSpecialCharacters

3. Theandelements

23

HowtheWebWorks?

WWWuseclassicalclient/serverarchitecture

HTTPistextbasedrequestresponseprotocol

24

Pagerequest

ClientrunningaWebBrowser

ServerrunningWebServerSoftware

(IIS,Apache,etc.)

Serverresponse

HTTP

HTTP

7/31/2019 01 - HTML Basics

13/49

7/2/2012

13

WhatisaWebPage?

Webpages aretextfilescontainingHTML

HTML HyperTextMarkupLanguage

Anotationfordescribing

documentstructure (semanticmarkup)

formatting (presentationmarkup)

Looks

(looked?)

like: AMicrosoftWorddocument

Themarkuptagsprovideinformationaboutthepagecontentstructure

25

CreatingHTMLPages

AnHTMLfilemusthavean.htm or.html fileextension

HTMLfilescanbecreatedwithtexteditors:

NotePad,NotePad++,PSPad

OrHTMLeditors(WYSIWYGEditors):

MicrosoftFrontPage

MacromediaDreamweaver

NetscapeComposer

MicrosoftWord26

7/31/2019 01 - HTML Basics

14/49

7/2/2012

14

HTMLBasicsText,Images,Tables,Forms

HTMLStructure

HTMLiscomprisedofelementsandtags

Beginswith andendswith

WhenwritingXHTML,mustdefineanamespace

Elements(tags)arenestedoneinsideanother:

Tagshaveattributes:

HTMLdescribesstructureusingtwomainsections: and

28

7/31/2019 01 - HTML Basics

15/49

7/2/2012

15

HTMLCodeFormatting

TheHTMLsourcecodeshouldbeformattedtoincreasereadabilityandfacilitatedebugging.

Everyblockelementshouldstartonanewline.

Everynested(block)elementshouldbeindented.

Browsersignoremultiplewhitespacesinthepage

source,soformattingisharmless.

For

performance

reasons,

formatting

can

be

sacrificed.

29

FirstHTMLPage

30

MyFirstHTMLPage

Thisissometext...

test.html

7/31/2019 01 - HTML Basics

16/49

7/2/2012

16

MyFirstHTMLPage

Thisissometext...

FirstHTMLPage:Tags

31

Openingtag

Closingtag

AnHTMLelementconsistsofanopeningtag,aclosingtagandthecontentinside.

MyFirstHTMLPage

Thisissometext...

FirstHTMLPage:Header

32

HTMLheader

7/31/2019 01 - HTML Basics

17/49

7/2/2012

17

MyFirstHTMLPage

Thisissometext...

FirstHTMLPage:Body

33

HTMLbody

SomeHTML

Tags

7/31/2019 01 - HTML Basics

18/49

7/2/2012

18

SomeSimpleTags

HyperlinkTags

ImageTags

Textformattingtags

35

LinktoTelerikWebsite

Thistextisemphasized.

newline

Thisoneismoreemphasized.

SomeSimpleTags Example

36

SimpleTagsDemo

Thisisalink.

Boldanditalictext.

sometags.html

7/31/2019 01 - HTML Basics

19/49

7/2/2012

19

SomeSimpleTags Example(2)

37

SimpleTagsDemo

Thisisalink.

Boldanditalictext.

sometags.html

TagsAttributes

Tagscanhaveattributes

Attributesspecifypropertiesandbehavior

Example:

Fewattributes

can

apply

to

every

element:

id,style,class,title

Theid isuniqueinthedocument

Contentoftitle attributeisdisplayedashint

whentheelementishoveredwiththemouse

Someelementshaveobligatoryattributes38

Attributealt withvalue"logo"

7/31/2019 01 - HTML Basics

20/49

7/2/2012

20

SomeSimpleTags

39


7/31/2019 01 - HTML Basics

21/49

7/2/2012

21


HeadingTags(h1 h6)

ParagraphTags

Sections:div andspan

41

Thisismyfirstparagraph

Thisismysecondparagraph

Heading1

Subheading2

Subheading3

Thisisadiv

HeadingsandParagraphsExample

42

Headingsandparagraphs

Heading1

Subheading2

Sub

heading

3



Thisisadiv

headings.html

7/31/2019 01 - HTML Basics

22/49

7/2/2012

22

Headingsandparagraphs

Heading1

Subheading2

Subheading3



Thisisadiv


Example(2)

43

headings.html

IntroductiontoHTMLHTMLDocumentStructureinDepth

7/31/2019 01 - HTML Basics

23/49

7/2/2012

23

Preface

ItisimportanttohavethecorrectvisionandattitudetowardsHTML

HTMLisonlyaboutstructure,notappearance

BrowserstolerateinvalidHTMLcodeandparse

errors youshouldnot.

45

The Declaration HTMLdocumentsmuststartwithadocument

typedefinition(DTD)

Ittellswebbrowserswhattypeistheservedcode

Possibleversions:HTML4.01,XHTML1.0

(Transitionalor

Strict),

XHTML

1.1,

HTML

5

Example:

Seehttp://w3.org/QA/2002/04/validdtdlist.html foralist

ofpossibledoctypes

46

7/31/2019 01 - HTML Basics

24/49

7/2/2012

24

HTMLvs.XHTML

XHTMLismorestrictthanHTML

Tagsandattributenamesmustbeinlowercase

Alltagsmustbeclosed(
,)while

HTMLallows
and andimplies

missingclosingtags(

par1

par2)

XHTMLallowsonlyoneroot element

(HTMLallows

more

than

one)

47

XHTMLvs.HTML(2)

ManyelementattributesaredeprecatedinXHTML,mostaremovedtoCSS

Attributeminimizationisforbidden,e.g.

Note:WebbrowsersloadXHTMLfasterthanHTMLandvalidcodefasterthaninvalid!

48

7/31/2019 01 - HTML Basics

25/49

7/2/2012

25

The Section

Containsinformationthatdoesntshowdirectlyontheviewablepage

Startsafterthe declaration

Beginswith andendswith

Containsmandatorysingle tag

Cancontainsomeothertags,e.g.

49

Section:tag

Titleshouldbeplacedbetween and tags

Usedtospecifyatitleinthewindowtitlebar

Searchenginesandpeoplerelyontitles50

TelerikAcademy WinterSeason2009/2010

7/31/2019 01 - HTML Basics

26/49

7/2/2012

26

Section:

Metatagsadditionallydescribethecontentcontainedwithinthepage

51

UsingScripts

7/31/2019 01 - HTML Basics

27/49

7/2/2012

27

Section:

The elementisusedtoembedscriptsintoanHTMLdocument

Scriptareexecutedintheclient'sWebbrowser

Scriptscanliveinthe andinthe

sections

Supportedclientsidescriptinglanguages:

JavaScript(it

is

not

Java!)

VBScript

JScript

53

TheTag Example

54

JavaScriptExample

functionsayHello(){document.write("

HelloWorld!");

}

sayHello();

scriptsexample.html

7/31/2019 01 - HTML Basics

28/49

7/2/2012

28

EmbeddingCSSStyles

Section:

The elementembedsformatting

information(CSSstyles)intoanHTMLpage

56

p

{

font

size:

12pt;

line

height:

12pt;

}p:firstletter{fontsize:200%;}

span{texttransform:uppercase;}

Stylesdemo.

Testuppercase.

styleexample.html

7/31/2019 01 - HTML Basics

29/49

7/2/2012

29

Comments:Tag

Commentscanexistanywherebetweenthe tags

Commentsstartwith

57

7/31/2019 01 - HTML Basics

30/49

7/2/2012

30

TextFormatting

TextFormatting

Textformattingtagsmodifythetextbetweentheopeningtagandtheclosingtag

Ex.Hello makesHellobold

bold

italicized

underlined

Samplesuperscript

Samplesubscript

strong

emphasized

Preformatted text

Quoted text block

Deleted text strike through

60

7/31/2019 01 - HTML Basics

31/49

7/2/2012

31

TextFormatting Example

61

PageTitle

Notice

ThisisasampleWebpage.

Nextparagraph:

preformatted.

More

Info

Specifically,wereusingXHMTL1.0transitional.

Nextline.

textformatting.html

TextFormatting Example(2)

62

PageTitle

Notice

ThisisasampleWebpage.

Nextparagraph:

preformatted.

MoreInfo

Specifically,wereusingXHMTL1.0transitional.

Nextline.

textformatting.html

7/31/2019 01 - HTML Basics

32/49

7/2/2012

32

Hyperlinks

Hyperlinks:Tag

Linktoadocumentcalledform.html onthesameserverinthesamedirectory:

Linktoadocumentcalledparent.html onthesameserverintheparentdirectory:

Linktoadocumentcalledcat.html onthesameserverinthesubdirectorystuff:

64

FillOurForm

Parent

Catalog

7/31/2019 01 - HTML Basics

33/49

7/2/2012

33

Hyperlinks:Tag(2)

LinktoanexternalWebsite:

AlwaysuseafullURL,including"http://",not

just"www.somesite.com"

Usingthetarget="_blank" attributeopens

thelinkinanewwindow

Linkto

an

e

mail

address:

65

BASD

Pleasereportbugshere(byemailonly)

Hyperlinks:Tag(3)

Linktoadocumentcalledapplynow.html

Onthesameserver,insamedirectory

Usinganimageasalinkbutton:

Linktoadocumentcalledindex.html

Onthesameserver,inthesubdirectoryenglish of

theparentdirectory:

66

Switchto

Englishversion

7/31/2019 01 - HTML Basics

34/49

7/2/2012

34

HyperlinksandSections

Linktoanotherlocationinthesamedocument:

Linktoaspecificlocationinanotherdocument:

67

GotoIntroduction

...

Introduction

GotoSection

3.1.1

In

chapter3.html

>...

3.1.1.TechnicalBackground

Hyperlinks Example

68

FillOurForm

Parent

Catalog

BASD


7/31/2019 01 - HTML Basics

35/49

7/2/2012

35

FillOurForm

Parent

Catalog

BASD


7/31/2019 01 - HTML Basics

36/49

7/2/2012

36

LinkstotheSameDocument

Example

71

TableofContents

Introduction

Somebackground

ProjectHistory

...therestofthetableofcontents...

Introduction

...

Section

1

follows

here

...Somebackground

...Section2followshere...

ProjectHistory

...Section2.1followshere...

linkstosamedocument.html

LinkstotheSameDocumentExample(2)

72

TableofContents

Introduction

Somebackground

ProjectHistory

...the

rest

of

the

table

of

contents...

Introduction


Somebackground


ProjectHistory

...Section2.1followshere...

linkstosamedocument.html

7/31/2019 01 - HTML Basics

37/49

7/2/2012

37

MiscellaneousTags

Insertinganimagewith tag:

Imageattributes:

Example:

Images: tag

src Location of image file (relative or absolute)

alt Substitute text for display (e.g. in text mode)

height Number of pixels of the height

width Number of pixels of the width

border Size of border, 0 for no border

74

7/31/2019 01 - HTML Basics

38/49

7/2/2012

38

MiscellaneousTags

:Drawsahorizontalrule(line):

:Deprecated!

:Deprecated!

75

HelloWorld!

Font3

Font+4

MiscellaneousTags Example

76

MiscellaneousTagsExample

HelloWorld!

Font3

Font+4

misc.html

7/31/2019 01 - HTML Basics

39/49

7/2/2012

39

Howtomakecolorschanges?

Hexadecimalnumber :

Colornames:

ChangingtheBackgroundcolor

ChangingTextcolor

Spotcolor

WENT'99

ImageBackground

MiscellaneousTags

78

7/31/2019 01 - HTML Basics

40/49

7/2/2012

40

MiscellaneousTags

79

CreatingLists

7/31/2019 01 - HTML Basics

41/49

7/2/2012

41

a. Appleb. Orangec. Grapefruit

OrderedLists: Tag

CreateanOrderedListusing:

Attributevaluesfortype are1,A,a,I,ori

81

1. Apple

2. Orange3. Grapefruit

A. AppleB. OrangeC. Grapefruit

I. AppleII. OrangeIII. Grapefruit

i. Apple

ii. Orangeiii. Grapefruit

Apple

Orange

Grapefruit

UnorderedLists: Tag

CreateanUnorderedListusing:

Attributevaluesfortype are:

disc,circle orsquare

82

Apple

Orange

Pear

o Apple

o Orange

o Pear

Apple

Orange

Pear

Apple

Orange

Grapefruit

7/31/2019 01 - HTML Basics

42/49

7/2/2012

42

Definitionlists:tag

Createdefinitionlistsusing

Pairsoftextandassociateddefinition;textisin

tag,definitionin tag

Renderswithoutbullets

Definitionisindented83

HTML

Amarkuplanguage

CSS

Language

used

to

Lists Example

84

Apple

Orange

Grapefruit

AppleOrange

Grapefruit

HTML

Amarkuplang

lists.html

7/31/2019 01 - HTML Basics

43/49

7/2/2012

43

HTMLSpecial

Characters

HTMLSpecialCharacters

BritishPound

Euro

""QuotationMark

JapaneseYen

EmDash

NonbreakingSpace

&&Ampersand>>Greater

Than

7/31/2019 01 - HTML Basics

44/49

7/2/2012

44

SpecialCharacters Example

87

[>>Welcome

Welcome

01 - HTML Basics

Documents

Transcript of 01 - HTML Basics