chapter 2 html basics - skkumonet.skku.edu/wp-content/uploads/2018/08/chapter-02... ·...

Web Programming Networking Laboratory 1/70

Sungkyunkwan University

Copyright 2000-2012 Networking LaboratoryCopyright 2000-2018 Networking Laboratory

Chapter 2

HTML basics

Prepared by D. T. Nguyen and H. Choo


Contents

World wide web fundamental

HTML editors

Basic structure of an HTML document

Paragraph and Text format

Table and list

More on HTML


What is the World Wide Web?

World Wide Web (WWW) is also called the Web

The web is an information space where documents and other web

resources are accessible via the Internet [1]

All the computers accessing the WWW use a communication

standard called HTTP.

[1] https://en.wikipedia.org/wiki/World_Wide_Web


How does the WWW work?

Web information is stored in documents called web pages.

Web pages are files stored on computers called web servers.

Computers reading the web pages are called web clients.

Web clients view the pages with a program called a web browser.

Popular browsers are Internet Explorer, Google Chrome and

Mozilla Firefox.


Fetching and displaying a Web page

Fetching:

A browser fetches a page from a web server by a request.

A request is a standard HTTP request containing a page address.

An address may look like this: http://www.someone.com/page.htm.

Displaying:

All web pages contain instructions for display

The browser displays the page by reading these instructions.

The most common display instructions are called HTML tags.


Hypertext Markup Language (HTML)

Describes the content and structure of information on a web page

Not the same as the presentation (appearance on screen)

Surrounds text content with opening and closing tags

Each tag's name is called an element

Syntax: <element> content </element>

Example: <p>This is a paragraph</p>

Most whitespace is insignificant in HTML (ignored or collapsed to a

single space)

We will use a new version called HTML5


HTML EDITORS


HTML EditorsNotepad

Notepad is a simple application comes up with windows allows you to

write some text and store them

No syntax highlighting, plugins, etc.


HTML EditorsNotepad++

More advanced text editor, give you a boost to do coding like HTML

Support syntax highlight, plugins for coding convenience


HTML EditorsAtom

Within the scope of this lecture, we are using atom for editing HTML

files:


Installing Atom.io

Type http://atom.io into your web browser and hit enter

Click “Download” to get a version for your OS

Run the installation file on your computer

http://atom.io/


Atom editor packages

Two must-have packages for the atom editor are atom-live-server and

color-picker

How to install:

File ➔ Settings

[http://code.makery.ch/library/html-css/part1/]


Install atom packages

How to install:

Enter name of the package in the search bar, then hit enter and click

install

[http://code.makery.ch/library/html-css/part1/]


Create your first page with Atom (1/5)

Create a folder on your computer for the html project, e.g. “L02”

Open Atom, then File ➔ Open Folder to browse to the created folder



Right-click on the “project” pane and choose “New File”. Name the file

“index.html”



Type the following code in the index.html file:



Click Packages ➔ atom-live-server ➔ Start server



Edit your web content. As long as you save the file, your change will

be displayed in the browser

If not, click F5 in the browser


HTML BASIC STRUCTURE


Sample web page (1/2)

Go to the link http://monet.skku.edu/~mc2016/

http://monet.skku.edu/~mc2016/


Sample web page (2/2)

Go to the link http://icoin.org/


Structure of an HTML document

A simple HTML document

<!DOCTYPE html><html><head>

<title>MC 2016</title>

</head><body>

…</body></html>


<!DOCTYPE>

Specify the type and version of HTML used in the web page


<head> tag

The <head> element is a container for metadata (data about data) and

is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not

displayed.

Metadata typically define the document title, character set, styles,

links, scripts, and other meta information.

The following tags describe metadata: <title>, <style>, <meta>, <link>,

<script>, and <base>.


Page Title: <title>

Placed within the <head> of the page

Displayed in the web browser's title bar and when bookmarking the

page, otherwise not visible to the user as page content

<title>Chapter 2: HTML Basics

</title>


Structure of an HTML content

HTML5 Elements such as article, header, footer, aside and many more

are used for semantics - to add meaning to your code.

Belong to the <body>


<header> tag (1/2)

The <header> element represents a container for introductory content

or a set of navigational links.

A <header> element typically contains:

logo or icon (website branding)

Navigation elements

You can have several <header> elements in one document.


<header> tag (2/2)

<header> example

Header


Headings: <h1>, <h2>, ..., <h6>

To separate major areas of the page

<h1>Sungkyunkwan University</h1><h2>Department of Electrical and Computer Engineering</h2><h3>Class of Web Programming</h3>


<article> tag (1/2)

The <article> tag is a standalone piece of content (e.g. entire blog

post, including title, author, etc.)

<article><h2>GENERAL INFORMATION</h2><p>The 33<sup>rd</sup> International Conference on Informati

on Networking (ICOIN) will take place in Kuala Lumpur,…</p>

</article>


<article> tag (2/2)

Example of an <article>


<section> tag (1/2)

Used to either group different articles into different purposes or

subjects, or to define the different sections of a single article.

<article><section>

GENERAL INFORMATION</section>

<section>IMPORTANT DATES

</section></article>


<section> tag (2/2)

Used to either group different articles into different purposes or

subjects, or to define the different sections of a single article.

<section> <!—WEATHER FORCAST--><article>

Weather day 1</article>

<article>Weather day 2

</article></section>


<footer> tag

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

authorship information

copyright information

contact information

sitemap

back to top links

related documents

You can have several <footer> elements in one document.


<footer> tag

<footer> example

<footer>footer content…

</footer>


TEXT & PARAGRAPH


Block vs. inline elements

Block elements contain an entire large region of content

A block-level element always starts on a new line and takes up the full

width available (stretches out to the left and right as far as it can).

Blocking out any other elements from sitting next to it on the left or right

Examples: paragraphs, lists, table cells etc.

Inline elements are those who only take up as much width as is

needed to display the contents of the element, thereby allowing other

elements to be in line with the inline element.

Example: images, links


Text formatting (1/3)

Formatting text style with following attributes:

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Small text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text



Example of text formatting

<p>This text is normal.</p><p><b>This text is bold.</b></p><strong>This text is strong</strong><i>This text is italic</i><em>This text is emphasized</em><h2>HTML <small>Small</small> Formatting</h2><h2>HTML <mark>Marked</mark> Formatting</h2><p>My favorite color is <del>blue</del> red.</p><p>My favorite <ins>color</ins> is red.</p><p>This is <sub>subscripted</sub> text.</p><p>This is <sup>superscripted</sup> text.</p>



Styling text with <span>

Possible to tune color, background-color, font-family

Good fonts for website (15):

Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana,

Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Trebuchet MS, Arial

Black, Impact,


<p> tag

Placed within the <body> of the page

<p>The main purpose of ICOIN 2019 is to improve our research by achieving the highest capability and encourage open discussions on computer communication and networking technologies…</p>


<br> tag

Forces a line break in the middle of a block element (inline)

Warning: Don’t overuse <br> tag in a line

<p>The 2016 International Conference on Computational Science and its Applications (ICCSA 2016) <br>July 04 - 07, 2016, at the Park Plaza Beijing Science Park Hotel, Beijing, China.</p>


<pre> tag

<pre> display text on screen as programmer typed

<pre>Paper Submission Due.Acceptance Notification.

</pre>Camera-ready Papers Due.<br>Conference Dates.


Horizontal line

The <hr> element is used to separate content (or define a change) in

an HTML page.

<!DOCTYPE html><html><body>

<h1>HTML</h1><p>HTML is a language for describing web pages.</p>

<hr><h1>CSS</h1>

<p>CSS defines how to display HTML elements.</p></body></html>


LINK


<a> tag

Links, or "anchors", to other pages (inline)

Uses the href attribute to specify the destination URL, sytax:

Can be absolute (to another web site) or relative (to another page on

this site)

<p>Search for it on <a href="http://www.google.com/">Google</a>

</p>

<a href="url">link text</a>

<p>Search for it on <a href=“cfp.html">Google</a>

</p>


Link target attributes

The target attribute specifies a window or a frame where the linked

document is loaded.

Syntax

<a href="" target="_blank|_self|_parent|_top|framename">


Bookmarks

Bookmark an HTML element and link to the bookmark

Use ID attribute to define a bookmark in a page

Go to the bookmark in a same page

Go to the bookmark in another page

<h2 id="info">GENERAL INFORMATION</h2>

<a href="#info">Jump to General Info</a>

<a href="home.html#info">Go to General Info</a>


<nav> tag

Defines a set of navigation links

<nav> is intended for major block of navigation links

<nav><a href="cfp.html">Call for Papers</a> |<a href="committees.html">Committees</a> |<a href="authors.html">Author Guideline</a> |<a href="chair.html">Chair Guideline</a>

</nav>


IMAGES


Images

The <img> tag defines an image in an HTML page.

The <img> tag has two required attributes: src and alt.

src specifies URL of an image

alt specifies an alternate text for an image

<img border="0" src="everland.jpg" alt="Everland" width="300"height="230">


ImagesExample


<h2>Everland</h2>

<img border="0" src="everland.jpg" alt="Everland"width="300" height="230">

</body></html>


Imagesalt attribute

Specify the alternate text to be displayed when the browser fails to

display the image on the screen for some reason

<img border="0" src="everland.jpg" alt="Everland" width="300" height="230">


Image types

JPEG

Suitable for complex, many-color images such as real photographs

Loss compression method is used.

PNG

Suitable for images with fewer colors, such as clip art

Lossless compression method

GIF

Ideal for images in the form of logos or clip art

Supports 256 colors only

It supports transparent backgrounds and animations.


TABLE AND LIST


Table example

The HTML <table> element

represents tabular data - that is,

information presented in a two-

dimensional table comprised of

rows and columns of cells

containing data.


HTML Table

Basic tags:

<tr>: define a row in a table

<th>: define a table header

<td>: define a cell

<th> <th> <th>

<td> <td> <td>

<td> <td> <td>

<td> <td> <td>

<tr>

<tr>

<tr>

<tr>


HTML Table:Defining a table


<h2>Basic HTML Table</h2>

<table style="width:100%"><tr>

<th>Firstname</th><th>Lastname</th>

</tr><tr>

<td>Jill</td><td>Smith</td>

</tr><tr>

<td>Eve</td><td>Jackson</td>

</tr></table>

</body></html>


HTML Table:Styling

Border by adding border = “#number”

Spanning rows and columns

Table caption: try it yourself

<table border="1">…</table>

<td rowspan=“2">…</td>

<td colspan=“2">…</td>

<caption> Your caption here!!! </caption>


ListUnordered List

<ul> represents a bulleted list of items

<li> represents a single item within the list

<strong> Before your session:</strong><ul>

<li>Check the Program<br><li>Pick up the Materials for Session Chair from

Registration Desk<br><li>Check the Meeting Room<br>

</ul>


ListOrdered list

<ol> represents a numbered list of items (block)

<strong> During your session:</strong><ol>

<li>Introduction<br /><li>Time allotment<br /><li>Absent speakers<br />

</ol>


Definition list (1/2)

<dl> represents a list of definitions of terms (block)

<dt> represents each term

<dd> is definition of the term

<dl><dt>Text Editor<dd>Program that comes with the default installation of most computer operating

systems that permits the user to save text to a file stripped of any formatting. Often used by web page authors, beginner and hardcore alike.

<dt>HTML Editor<dd>Basically a text editor on steroids facilitating the writing of HTML source

code by providing a graphical user interface containing buttons and drop-down menus that allow one to insert commonly used snippets of code.

<dt>WYSIWYG Editor<dd>A program which permits the user to create a web page by working 'on top' w

ith the finished product as opposed to working underneath with the HTML source code (WYSIWYG = What You See Is What You Get). Although the easiest to use, WYSIWYG editors quite often produce bloated and junky source code.</dl>


Definition list (2/2)

<dt><dd>


MORE ABOUT HTML


More about HTML tags

Some tags can contain additional information called attributes

Syntax:

<element attribute="value" attribute="value"> content </element>

Example:

<a href="page2.html">Next page</a>

Some tags don't contain content and can be opened and closed in one

tag

Syntax:

<element attribute="value" attribute="value" />

Example:

<br />, <hr />, <br>, <hr>

<img src="bunny.jpg" alt="pic from Easter" />

Note: whether you use the '/' in a self-closing tag is up to you, as long as

you're consistent


Generic container: <div> tag

The HTML Content Division element (<div>) is the generic container

for flow content. It has no effect on the content or layout until styled

using CSS.

As a "pure" container, the <div> element does not inherently represent

anything

Note: The <div> element should be used only when no other semantic

element (such as <article> or <nav>) is appropriate.

<div><p>Any kind of content here. Such asparagraphs, tables, images. You name it!</p>

</div>


Rules and exceptions

Block vs. inline:

Some block elements can contain only other block elements: <body>, <form>

<p> tags can contain only inline elements and plain text

Some block elements can contain either: <div>, <li>

Some elements are only allowed to contain certain other elements:

<ul> is only allowed to contain <li>

Some elements are only allowed once per document:

<html>

<body>

<head>

<main>


Nesting tags

Tags must be correctly nested

A closing tag must match the most recently opened tag

Wrong:

The browser may render it correctly anyway, but it is invalid HTML

Correct:

<p>HTML is <em>really</em>,<strong>REALLY lots of</strong> fun!

</p>

<p>HTML is <em> really, <strong>REALLY </em> lots of</strong>fun!</p>

Comments: 

Comments to document your HTML file or "comment out" text

Useful at top of page and for disabling code

Comments cannot be nested and cannot contain a --

<p>Software courses are  a lot of fun!</p>


Way of representing any Unicode character within a web page:

Complete list of HTML entities

How would you display the text & on a web page?

Special character entities

Character(s) Entity

<> < >

™ © ™ ©

π δ Δ π δ Δ

" & " &

https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references


HTML-encoding text

To display this text in a web page:

The special characters should be encoded as follows

<p><a href="http://google.com/search?q=marty&ie=utf-8"

>Search Google for Marty

</a></p>

chapter 2 html basics - skkumonet.skku.edu/wp-content/uploads/2018/08/chapter-02... ·...

Documents