Zsolt Harsányi Vice-President of CLIMMAR Hungary Zsolt Harsányi Vice-President of CLIMMAR Hungary.
HyperText Markup Languageusers.iit.uni-miskolc.hu/~tothzs/edu/webtech/lectures/03HTML.pdfHyperText...
Transcript of 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
Zsolt Tóth (UM) HyperText Markup Language 2018 2 / 31
Introduction History
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
Zsolt Tóth (UM) HyperText Markup Language 2018 3 / 31
Introduction History
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
Zsolt Tóth (UM) HyperText Markup Language 2018 4 / 31
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 <!-- Comment -->
Zsolt Tóth (UM) HyperText Markup Language 2018 5 / 31
Introduction Syntax
HTML Document
Strict structurehead
Meta dataDocument descriptionExternal resources
js and css files
bodycontent
id, class attributes
1 <html><head>
3 <!-- Meta data --></head>
5 <body><!-- Content -->
7 </body></html>
Zsolt Tóth (UM) HyperText Markup Language 2018 6 / 31
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;
Zsolt Tóth (UM) HyperText Markup Language 2018 7 / 31
Introduction Syntax
Special Chars
Right visualizationBrowser supportMore charactersMore data
User inputConversion
Client-sideServer-side
á á é é í í ó óö ö o ő ü ü u ű
Zsolt Tóth (UM) HyperText Markup Language 2018 8 / 31
Introduction Syntax
XHTML
Valid XML documentDOCTYPEOpening and closing tagsEmpty tag <br/>
Case-sensitiveAttributesname="value"
Zsolt Tóth (UM) HyperText Markup Language 2018 9 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 10 / 31
Introduction Syntax
body
Visualized contentFrequent elements
textlinksliststablesimagesforms
AttributeslinkalinkvlinkbackgroundtextHTML 5 compatibility
Zsolt Tóth (UM) HyperText Markup Language 2018 11 / 31
Tags Text
Table of Contents
1 IntroductionHistorySyntax
2 TagsTextTablesMultimediaForms
3 Page LayoutFrameTablesdiv, span, CSS
Zsolt Tóth (UM) HyperText Markup Language 2018 12 / 31
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
Zsolt Tóth (UM) HyperText Markup Language 2018 13 / 31
Tags Tables
Table
<table><th>
<td>
<tr><td>
encapsulationHeaderContentRows, ColumnsFix column count
<table><caption><thead><tfoot><tbody>
Separation ofheader & footerinfo & content
Strict sequence
Zsolt Tóth (UM) HyperText Markup Language 2018 14 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 15 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 16 / 31
Tags Multimedia
<img> & <map>
ImageAttributes
src source pathalt alternative text
Assign to <img>
usemap attributedefine linkshref
Zsolt Tóth (UM) HyperText Markup Language 2018 17 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 18 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 19 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 20 / 31
Tags Forms
Form
Send users inputAttributes
action URImethod GET | POST
Formating ?SubmissionHTTP RequestJavaScript event handlers
<input> type exampleslabeltext fieldtextareacheckboxradio buttondrop–down listhiddenbuttonHTML 5
daterangecolor
Zsolt Tóth (UM) HyperText Markup Language 2018 21 / 31
Tags Forms
Inputs
Texttextpasswordemailtextarea
Numbernumber
integerreal
range
Date & Timedatedatetimedatetime-localtimemonthweek
Otherurlcolor
1 <input type="color" name="favcolor"><input type="date" name="bday">
Zsolt Tóth (UM) HyperText Markup Language 2018 22 / 31
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
Zsolt Tóth (UM) HyperText Markup Language 2018 23 / 31
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>
Zsolt Tóth (UM) HyperText Markup Language 2018 24 / 31
Tags Forms
Buttons
ButtonSimple buttonJavaScript eventhandlerCustomizable
ResetReset the formDefault values
SubmitSend formaction=URImethod= GET orPOST
Zsolt Tóth (UM) HyperText Markup Language 2018 25 / 31
Page Layout
Table of Contents
1 IntroductionHistorySyntax
2 TagsTextTablesMultimediaForms
3 Page LayoutFrameTablesdiv, span, CSS
Zsolt Tóth (UM) HyperText Markup Language 2018 26 / 31
Page Layout
What we already know
Zsolt Tóth (UM) HyperText Markup Language 2018 27 / 31
Page Layout
What are the expcetations of the Industy
Zsolt Tóth (UM) HyperText Markup Language 2018 28 / 31
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
Zsolt Tóth (UM) HyperText Markup Language 2018 29 / 31
Page Layout Tables
Table
HTML 4 Work aroundEntire page is a tableBrowser independentNiceBunch of dataNot modularComplex structure
Zsolt Tóth (UM) HyperText Markup Language 2018 30 / 31
Page Layout div, span, CSS
<div> & CSS
<div>
Part of the pageSimple blocksid attributes
CSSCascading Style SheetsDefine visualizationPosition of div elementsNext Lecture
Zsolt Tóth (UM) HyperText Markup Language 2018 31 / 31