HTML Revision: Gilbert Phuah

HTML REVISION
Gilbert Phuah
What is covered?
■ HTML basic ■ Comments

■ Attributes ■ Links
■ Heading ■ Images
■ Paragraph ■ Tables
■ Formatting ■ Lists
■ Quotations ■ Layouts
REFERENCES AND
EXAMPLES
HTML basic
■ With HTML you can create your own

Website.
■ HTML stands for Hyper Text Markup
Language
■ HTML describes the structure of Web
pages using markup
HTML basic
■ Common Facts
– Web Browsers: Chrome, Safari, Opera
– Search Engine: Google, Bing, Yahoo
– Internet connection type: LAN, WIFI
– Text editor: Word, Notepad, Wordpad
– W3C: World Wide Web Consortium
HTML Page Structure
<!Doctype html>
<html>
<head>
<title> learn HTML</title>
</head>
<body>
<h3> Definition of HTML</h3>
<p>Hyper Text Markup Language</p>
</body>
</html>
HTML basic
Do Not
Forget the
■ HTML Tag Structure/ Syntax End Tag
■ E.g.
HTML Attributes
■ All HTML elements can have attributes

■ Attributes are always specified inside the
start tag
■ Attributes usually come in name/value
pairs like: name="value"
HTML Attributes
■ E.g. attribute
attribute
attribute attribute attribute

HTML Heading
■ <h1>
■ <h2>
■ <h3>
■ <h4>
■ <h5>
■ <h6>
HTML Heading
■ Try this:
<h1>H1 text</h1>
<h2>H2 is smaller than H1</h2>
<h4>H4 has similar size with normal text.</h4>
<p>This is a normal paragraph.</p>
<hr>
<h3>Sub-title</h3>
HTML Paragraph
■ The HTML <p> element defines a paragraph:

<p>
I type something in a paragraph.
I type something in a para graph.
I type something in a para
graph
</p>
HTML Paragraph

<p>
I type something in a paragraph. <br>
I type something in a para graph. <br>
I type something in a para<br>
graph
</p>
HTML Paragraph

<p>
I type something in a paragraph. <br>
graph. <br>
I type something in a para<br>
graph
</p>
HTML Paragraph
■ We use for 1 letter spacing.

■ We use <br> to break new line.
HTML Paragraph
■ Another way for HTML paragraph is <pre>

<pre>
I type something in a paragraph.
I type something in a para graph.
graph
</pre>
HTML Formatting
■ Formatting elements were designed to

display special types of text:
<b> - Bold text <u> - Underline text
<strong> - Important text <del> - Deleted text
<i> - Italic text <ins> - Inserted text
<em> - Emphasized text <sub> - Subscript text
<mark> - Marked text <sup> - Superscript text
HTML Formatting
Try this
■ <b>HTML4</b>V.S.<strong>HTML5</strong>
■ <i>HTML4</i>V.S.<em>HTML5</em>
■ <u>HTML4</u>V.S.<ins>HTML5</ins>
HTML Formatting: Superscript
■ Can you Insert:

y= ax2 + bx + c
<p>y= ax<sup>2</sup> + bx + c</p>
HTML Formatting: Subscript
■ Can you Insert:

Photosynthesis:
CO2 + H2O → C6H12O6 + O2
<p> Photosynthesis:<br>
CO<sub>2</sub> + H<sub>2</sub>O → C<sub>6
</sub> H<sub>12 </sub> O<sub>6 </sub> + O<sub>2
</sub> </p>
HTML Quotations
<q> <blockquote>
Quotation with “double quote” Quotation in a rectangle
Try this: Try this:
<p>Malaysia: <q>a federal <p>Malaysia:<blockquote>a federal
constitutional monarchy in constitutional monarchy in
Southeast Asia. It consists of 13 Southeast Asia. It consists of 13
states and three federal territories, states and three federal territories,
separated by the South China Sea separated by the South China Sea
into two similarly sized regions, into two similarly sized regions,
Peninsular Malaysia and Malaysian Peninsular Malaysia and Malaysian
Borneo.</q></p> Borneo.</blockquote></p>
HTML Comments
■ Syntax for comment: <!- - - ->

■ Anything inside comment will not showed in
website.
– E.g. <! - - To be continue - ->
■ Comments is used to jot down note for
reference
HTML Comments (e.g.)
<!- - Ali’s work- ->

<link rel=“….” type=“…..”>
<!- -Connect to google map- ->

<map………..
<!- -to be continue- ->

<pre>T…………………………………</pre>
Location
HTML Links
■ Location of afile
house
■ 3 types to describe location:
Absolute
– Full link:2,
address: Jalan Sentul….
http:www.youtube.com/v=WMSkl
– Based onlink:
Relative current location:
video/mr second house
bean.mp4
from the left
– Coordinate: 3°10'47.1"N 101°41'41.3"E
IP address: 10.54.62.253/115.75.21.172
HTML Links
■ Tag(s) using link with their attribute
<a href="https://www.w3schools.com/html/">Visit our
HTML tutorial</a>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<img src=“logo.jpg”>
<source src="movie.mp4" type="video/mp4">
<script src="myScript.js"></script>
HTML Images
■ 2 Tags to insert picture into HTML

– <img>
– <picture>
HTML Images
■ <img src="pic_trulli.jpg“ >

HTML Images - attribute
■ Other attribute(s) for <img>:

– Alt Appear text message when picture fail to show
– Title Appear text message when mouse on top of picture
– Width Set picture’s width in pixels (px) or percent (%)
– Height Set picture’s height in pixels (px) or percent (%)
HTML Images
<picture>
<source media="(min-width: 800px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 540px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
HTML Tables
■ <table> - table tag

■ <tr> - table row
■ <th> - table header
■ <td> - table data
HTML Tables:
Tables border, caption, merge cell
Try this: Insert <tr>
Border
<table>border> <td>Wednesday</td> Merge 2 cells
<tr> Merge 4 cells <td>Assembly</td> in same row
<td>Monday</td> in same row <td>ICT</td>
rowspan=“2”> ICT</td>
rowspan=“4”> Assembly</td>
<td>Assembly</td> <td>Malay</td>
<td>Science</td> </tr><tr>
<td>GP</td> <td>Thursday</td>
</tr> <td>Assembly</td>
<tr> <td>ICT</td> Add a table
caption
<td>Tuesday</td> Merge 2 cells in <td>Math</td>
<td>Assembly</td> same column </tr>
colspan=“2”> PE</td>
<td>PE</td> </table>
<caption>Timetable</caption>
<td>PE</td> </table>
</tr>
HTML Lists – unordered list Available style:
disc, circle, square
■ <ul> ■ <ul style="list-style-type:disc">

<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>
HTML Lists – ordered list Available type:
“A”, “a”, “1”, “i”, “I”
<ol type="I" start="39"> ■ <ol type=“a">

■ <ol>
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ol> </ol>
HTML Lists – description list
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Layout
■ We can divide webpage into several parts.

■ Any changes of each part won’t affect the
others.
■ Tags: <header>, <nav>, <footer> …etc
HTML Layout
HTML Layout – details and summary
■ Try this:
<details>
<summary>© 2018 by Gilbert.</summary>
<p>All Rights Reserved.</p>
<p>All content and graphics on this web site are
the property of Gilbert.</p>
</details>
THE END

HTML Revision: Gilbert Phuah

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Revision: Gilbert Phuah

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML REVISION

■ HTML basic ■ Comments

■ With HTML you can create your own

■ All HTML elements can have attributes

attribute attribute attribute

■ The HTML <p> element defines a paragraph:

■ The HTML <p> element defines a paragraph:

■ The HTML <p> element defines a paragraph:

■ We use &nbsp; for 1 letter spacing.

■ Another way for HTML paragraph is <pre>

■ Formatting elements were designed to

■ Can you Insert:

■ Can you Insert:

■ Syntax for comment: <!- - - ->

<!- - Ali’s work- ->

<!- -Connect to google map- ->

<!- -to be continue- ->

■ 2 Tags to insert picture into HTML

■ <img src="pic_trulli.jpg“ >

■ Other attribute(s) for <img>:

<source media="(min-width: 800px)" srcset="img_pink_flowers.jpg">

<source media="(min-width: 540px)" srcset="img_white_flower.jpg">

<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

■ <table> - table tag

■ <ul> ■ <ul style="list-style-type:disc">

<ol type="I" start="39"> ■ <ol type=“a">

■ We can divide webpage into several parts.

Anda mungkin juga menyukai

■ We use for 1 letter spacing.