HyperText Markup Languageusers.iit.uni-miskolc.hu/~tothzs/edu/webtech/lectures/03HTML.pdfHyperText...

HyperText Markup LanguageWEB Technologies I

Zsolt Tóth

University of Miskolc

2018

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

HTML

Plain textMarkup LanguageTag

<tag/><tag>....</tag>

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

XHTML

Valid XML documentDOCTYPEOpening and closing tagsEmpty tag <br/>

Case-sensitiveAttributesname="value"


Introduction Syntax

head

Describes the document<title>

ReferencesCSS, JSExternal resourcesMeta data

<meta/>

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

<head>2 <meta name="keywords" content="HTML, CSS, XHTML"/>

<meta name="description" content="Tutorial"/>4 </head>


Introduction Syntax

body

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

Table

<table><th>

<td>

<tr><td>

encapsulationHeaderContentRows, ColumnsFix column count

<table><caption><thead><tfoot><tbody>

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

<td colspan="2" rowspan="2">...</td>


Tags Tables

colgroup

col

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

<img> & <map>

ImageAttributes

src source pathalt alternative text

Assign to <img>

usemap attributedefine linkshref


Tags Multimedia

<map>

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

3

<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

<source>

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

<source>

<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

Form

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

range

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"2 value="male"> Male<br/>

<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>

<option>

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

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

<option value="audi">Audi</option>6 </select>


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

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

Table

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


Page Layout div, span, CSS

<div> & CSS

<div>

Part of the pageSimple blocksid attributes

CSSCascading Style SheetsDefine visualizationPosition of div elementsNext Lecture

Date post:	03-Jun-2020
Category:	Documents
Upload:	others
View:	15 times
Download:	0 times

HyperText Markup Languageusers.iit.uni-miskolc.hu/~tothzs/edu/webtech/lectures/03HTML.pdfHyperText...

Documents