chapter 2 html basicsmonet.skku.edu/.../2018/08/chapter-02-html-basics-2020.pdf · 2020. 8. 31. ·...

Web Programming Networking Laboratory 1/69

Sungkyunkwan University

Copyright 2000-2012 Networking LaboratoryCopyright 2000-2020 Networking Laboratory

Chapter 2

HTML basics

Prepared by H. Choi, D. T. Nguyen, and H. Choo


Contents

2.1 World Wide Web Fundamentals

2.2 HTML Editors

2.3 HTML Basic Structure

2.4 HTML5 New Elements

2.5 Paragraph and Text Format

2.6 Table and List

2.7 More on HTML


2.1 World Wide Web FundamentalsWhat is the World Wide Web (WWW)?

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


2.1 World Wide Web FundamentalsHow 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


2.1 World Wide Web FundamentalsFetching 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.html

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


2.1 World Wide Web FundamentalsHypertext 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


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


2.2 HTML EditorsNotepad++

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

Support syntax highlight, plugins for coding convenience


2.2 HTML EditorsAtom

Within the scope of this lecture, we are using Atom for editing HTML files:


2.2 HTML Editors 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/


2.2 HTML Editors Atom editor packages

Two must-have packages for Atom editor:

atom-live-server

color-picker

How to install:

File ➔ Settings

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


2.2 HTML Editors 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/]


2.2 HTML Editors 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


2.3 HTML Basic StructureSample web pages (1/2)

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

http://imcom.org/


2.3 HTML Basic StructureSample web pages (2/2)

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

http://icoin.org/main.php


2.3 HTML Basic StructureStructure of an HTML document

A simple HTML document

<!DOCTYPE html><html><head><title>Web Programming</title>

</head><body><h1>Hola!</h1>

</body></html>


2.3 HTML Basic Structure<!DOCTYPE>

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

Complicated and unmemorable!


2.3 HTML Basic Structure<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, and metadata is

not displayed

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

links, scripts, and other meta information

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

<script>, and <base>


2.3 HTML Basic Structure<title>: Page 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>


2.3 HTML Basic StructureDeclaring language

Declaring a default language is already important for applications such

as accessibility and search engines

Two-letter primary codes exist for other languages—for example, de

(German), it (Italian), nl (Dutch), es (Spanish), ar (Arabic), ru

(Russian), and zh (Chinese)

http://j.mp/lang-subtag

It makes no apparent difference unless you use a screen reader or you

are a search engine

<html lang="en">

http://j.mp/lang-subtag


2.3 HTML Basic StructureCharacter encoding

You don't really need to know what character encoding is in detail, but

basically, it defines the set of valid human language characters that

can be used in the document. It is safest to stick to UTF-8, a universal

character set that allows all characters from all languages

<head><meta charset="UTF-8" /><title> you name it! </title>

</head>


2.4 HTML5 New ElementsWeb authoring stats: Popular class names

Analyzed the real-world use of class names, elements, attributes and

related meta data of a billion of documents, revealed some common

semantic patterns used by authors


2.4 HTML5 New ElementsWhy HTML5?

HTML4's use of div and header tags to describe a document's

structure has many limitations

The div tag acts as a generic block level division. That's all fine and well

until you start to have nested DIVs

Without a descriptive ID or class attribute, there's no way to know whether

its function is primarily one of presentation style or semantics

HTML5 adds more semantic elements


2.4 HTML5 New ElementsStructure of an HTML content

HTML5 elements such as section, article, aside, nav, header, footer,

and many more are used for semantics to add meaning to your code

Belong to the <body>


2.4 HTML5 New Elements<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


2.4 HTML5 New Elements<header> tag (2/2)

<header> example Header


2.4 HTML5 New Elements<nav>

Explicitly mark up groups of navigational links

<nav><h2>Main navigation</h2><ul>

<li><a href="/">Home</a></li><li><a href="/blog/">Weblog</a></li><li><a href="/about/">About</a></li><li><a href="/contact/">Contact</a></li>

</ul></nav>


2.4 HTML5 New Elements<aside>

For content that should be additional to the main content, i.e. related content

<aside><p><em>Sectioning root</em> elements are <code><blockquote></code>, <code><body></code>, <code><details></code>, <code><fieldset></code>,<code><figure></code>, and <code><td></code></p></aside>


2.4 HTML5 New Elements<div>, <section>, and <article>

<section>

Generic document or application section

Is a chunk of related content

A general rule is that the section element is appropriate only if the

element's contents would be listed explicitly in the document's outline

<article>

An independent section of a document or site

Should be able to stand alone but still make sense

E.g. web blog article, forum post, comment

<div>

Generic container, a flow content element


2.4 HTML5 New Elements<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>


2.4 HTML5 New Elements<article> tag (2/2)

Example of an <article>


2.4 HTML5 New Elements<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>


2.4 HTML5 New Elements<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>


2.4 HTML5 New Elements<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


2.4 HTML5 New Elements<footer> tag

<footer> example

<footer>footer content…

</footer>


2.4 HTML5 New ElementsHTML5 Outliner

To help you outline your document right:

https://gsnedders.html5.org/outliner

https://github.com/h5o/

https://gsnedders.html5.org/outliner

https://github.com/h5o/


2.5 Paragraph and Text FormatBlock 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


2.5 Paragraph and Text Format 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>


2.5 Paragraph and Text Format Text styling (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, inline

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

Web safe font: https://www.w3schools.com/cssref/css_websafe_fonts.asp

https://www.w3schools.com/cssref/css_websafe_fonts.asp


2.5 Paragraph and Text Format <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>


2.5 Paragraph and Text Format <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>


2.5 Paragraph and Text Format <pre> tag

<pre> display text on screen as programmer typed

<pre>Paper Submission Due.Acceptance Notification.

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


2.5 Paragraph and Text Format <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>


2.5 Paragraph and Text Format 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">


2.5 Paragraph and Text Format 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>


2.6 Table and ListTable 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


2.6 Table and List 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>


2.6 Table and List Defining a table

<!DOCTYPE html><html><body>

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


2.6 Table and List Styling a table

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>


2.6 Table and 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>


2.6 Table and 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>


2.6 Table and List 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>


2.6 Table and List Definition list (2/2)

<dt><dd>


2.7 More on 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


2.7 More on HTML 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>


2.7 More on HTML 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>


2.7 More on HTML 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>

2.7 More on HTML 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?

2.7 More on HTML Special character entities

Character(s) Entity

<> < >

™ © ™ ©

π δ Δ π δ Δ

" & " &

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


2.7 More on HTML 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>


2.7 More on HTML 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>


AppendixColors

http://paletton.com/

https://visme.co/blog/website-color-schemes/

<body><h1 style="color:rgb(24, 134, 217);">HTML</h1>

<p>HTML is a language for describing web pages.</p><hr><h1 style="color:rgb(184, 217, 24);">CSS</h1>

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

http://paletton.com/

https://visme.co/blog/website-color-schemes/


AppendixColor-picker

How to use color-picker to obtain color code

Place your cursor where you want to insert color code and right click

Select Color Picker and click the color you want

Click

chapter 2 html basicsmonet.skku.edu/.../2018/08/chapter-02-html-basics-2020.pdf · 2020. 8. 31. ·...

Documents