HyperText Markup Languagetothzs/edu/webtech/lectures/03HTM… · HyperText Markup Language WEB...

transcript

HyperText Markup LanguageWEB Technologies I

Zsolt Tóth

University of Miskolc

Zsolt Tóth (UM) HyperText Markup Language 2018 1 / 31

Introduction History

Table of Contents

1 IntroductionHistorySyntax

2 TagsTextTablesMultimediaForms

3 Page LayoutFrameTablesdiv, span, CSS

Versions

Version 0 (’90)Headings, ParagraphsLists, anchors (links)

Version 1Images

Version 2 (’95)form, file uploadtables, image–mapsInternationalization

Version 3 and 3.2 (’97 Jan.)appletsscriptscolors

Version 4 (’97 Dec.)Backward compatibilityStyle sheetsDocument Types:

StrictTransitionalFrameset

HTML 5

2006New Elements

Audio, Video2D and 3D GraphicsData storageCSS 3

+ Easy-to-read+ Standardized+ Better forms+ Modern web applications+ Client-side data storage- Browser support- Takes time to be dominant- License

Introduction Syntax

Plain textMarkup LanguageTag

Attributesname="value"

BrowserInterpretVisualize

Describe the contentStructural elements onlyStyle description

In the documentsSeparate file (CSS)Browser default settings

Dynamic behaviorJavaScriptJQueryAngular JSetc.

1

Introduction Syntax

HTML Document

Strict structurehead

Meta dataDocument descriptionExternal resources

js and css files

bodycontent

id, class attributes

1 <html><head>

3 </head>

5 <body>

7 </body></html>

Introduction Syntax

Character Encoding

Binary format!1 character = {7,8,16,32} bitCharacter tables

ASCIIUTF-8UTF-16UTF-32ISO 8859-{1,2,. . . }

Browser SettingsMeta Data

IssuesNon-English Letters(á,é,ü,u,ñ,. . . )Special glyphs (¿)Not Latin Alphabet

GreekCyril

SolutionsStore character codes&cccc; or &#dddd;

Introduction Syntax

Special Chars

Right visualizationBrowser supportMore charactersMore data

User inputConversion

Client-sideServer-side

á á é é í í ó óö ö o ő ü ü u ű

Introduction Syntax

Valid XML documentDOCTYPEOpening and closing tagsEmpty tag <br/>

Case-sensitiveAttributesname="value"

Introduction Syntax

Describes the document<title>

ReferencesCSS, JSExternal resourcesMeta data

<meta/>

Data about data forprocessing & extractionkey-value pairsname="name"content="value"

Introduction Syntax

Visualized contentFrequent elements

textlinksliststablesimagesforms

AttributeslinkalinkvlinkbackgroundtextHTML 5 compatibility

Tags Text

Table of Contents

Tags Text

Text Formating

p paragraphhx header x∈ {1..6}br break linehr horizontal line

i italicb boldu underline

strong ≈ boldsub subindexsup index

em emphasizedcite citation

q short quotationol ordered list (1,2,. . . )ul unordered listli list item

Tags Tables

encapsulationHeaderContentRows, ColumnsFix column count

Separation ofheader & footerinfo & content

Strict sequence

Tags Tables

Megre cells

colspann cells are merged<td> not necessary

rowspann rows are merged<tr> is required<td> is omitted

Tags Tables

colgroup

AttributesHTML 5

StylesIn-line

1 <colgroup><col span="2" style="background-color:red">

3 <col style="background-color:yellow"></colgroup>

5 <tr><th>ISBN</th>

7 <th>Title</th><th>Price</th>

9 </tr>

Tags Multimedia

ImageAttributes

src source pathalt alternative text

Assign to <img>

usemap attributedefine linkshref

Tags Multimedia

1 <img src="planets.gif" width="145"height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">5 <area shape="rect" coords="0,0,82,126"

href="sun.htm" alt="Sun"/>7 <area shape="circle" coords="90,58,3"

href="mercur.htm" alt="Mercury"/>9 <area shape="circle" coords="124,58,8"

href="venus.htm" alt="Venus"/>11 </map>

Tags Multimedia

<audio>

HTML 5 XHTML 4 X

plug–inflash

Supported formatsMP3 audio/mpegWav audio/wavOgg audio/ogg

1 <audio controls><source src="horse.ogg" type="audio/ogg">

3 <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio tag.

5 </audio>

Tags Multimedia

<video>

HTML 5 XHTML 4 X

plug–inflash

Supported formatsMP4 video/mp4WebM video/webmOgg video/ogg

<track>

1 <video width="320" height="240" controls><source src="movie.mp4" type="video/mp4">

3 <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.

5 </video>

Tags Forms

Send users inputAttributes

action URImethod GET | POST

Formating ?SubmissionHTTP RequestJavaScript event handlers

<input> type exampleslabeltext fieldtextareacheckboxradio buttondrop–down listhiddenbuttonHTML 5

daterangecolor

Tags Forms

Inputs

Texttextpasswordemailtextarea

Numbernumber

integerreal

Date & Timedatedatetimedatetime-localtimemonthweek

Otherurlcolor

1 <input type="color" name="favcolor"><input type="date" name="bday">

Tags Forms

Multiple Choices

Radio ButtonMultiple optionsIdentified by name attributeOnly one selected

genderage

CheckboxMultiple choicesname attributeMany choices can be marked

Are you interested in ..Which languages do youspeak?

<input type="radio" name="gender"4 value="female"> Female

Tags Forms

Drop–down list

Multiple ChoicesOnly one can be selectedFixed values

CompactTons of options<select>

<select>2 <option value="volvo">Volvo</option>

<option value="saab">Saab</option>4 <option value="mercedes">Mercedes</option>

Tags Forms

Buttons

ButtonSimple buttonJavaScript eventhandlerCustomizable

ResetReset the formDefault values

SubmitSend formaction=URImethod= GET orPOST

Page Layout

Table of Contents

Page Layout

What we already know

Page Layout

What are the expcetations of the Industy

Page Layout Frame

Divide and Conquer!Split the page into fragmentsSimplify the task

- Browser dependentvisualization

- Do not recommendedHTML 4 DOCTYPEHTML 5 do not supportframes

Page Layout Tables

HTML 4 Work aroundEntire page is a tableBrowser independentNiceBunch of dataNot modularComplex structure

Page Layout div, span, CSS

<div> & CSS

Part of the pageSimple blocksid attributes

CSSCascading Style SheetsDefine visualizationPosition of div elementsNext Lecture

HyperText Markup Languagetothzs/edu/webtech/lectures/03HTM… · HyperText Markup Language WEB...

Documents