Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Web Programming Networking Laboratory 1/68
Sungkyunkwan University
Copyright 2000-2012 Networking LaboratoryCopyright 2000-2018 Networking Laboratory
Chapter 2
HTML basics
Prepared by D. T. Nguyen and H. Choo
Web Programming Networking Laboratory 2/68
Contents
2.1 World wide web fundamental
2.2 HTML editors
2.3 Basic structure of an HTML document
2.4 HTML5 new elements
2.5 Paragraph and Text format
2.6 Table and list
2.7 More on HTML
Web Programming Networking Laboratory 3/68
2.1 WWW fundamentalWhat 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
Web Programming Networking Laboratory 4/68
2.1 WWW fundamental 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.
Web Programming Networking Laboratory 5/68
2.1 WWW fundamental 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.
Web Programming Networking Laboratory 6/68
2.1 WWW fundamental 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
Web Programming Networking Laboratory 7/68
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.
Web Programming Networking Laboratory 8/68
2.2 HTML editorsNotepad++
More advanced text editor, give you a boost to do coding like HTML
Support syntax highlight, plugins for coding convenience
Web Programming Networking Laboratory 9/68
2.2 HTML EditorsAtom
Within the scope of this lecture, we are using atom for editing HTML
files:
Web Programming Networking Laboratory 10/68
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
Web Programming Networking Laboratory 11/68
2.2 HTML Editors 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/]
Web Programming Networking Laboratory 12/68
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/]
Web Programming Networking Laboratory 13/68
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
Web Programming Networking Laboratory 14/68
2.2 HTML Editors Create your first page with Atom (2/5)
Right-click on the “project” pane and choose “New File”. Name the file
“index.html”
Web Programming Networking Laboratory 15/68
2.2 HTML Editors Create your first page with Atom (3/5)
Type the following code in the index.html file:
Web Programming Networking Laboratory 16/68
2.2 HTML Editors Create your first page with Atom (4/5)
Click Packages ➔ atom-live-server ➔ Start server
Web Programming Networking Laboratory 17/68
2.2 HTML Editors Create your first page with Atom (5/5)
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
Web Programming Networking Laboratory 18/68
2.3 HTML basic structure Sample web pages (1/2)
Go to the link imcom.org
Web Programming Networking Laboratory 19/68
2.3 HTML basic structure Sample web pages (2/2)
Go to the link http://icoin.org/
Web Programming Networking Laboratory 20/68
2.3 HTML basic structure Structure of an HTML document
A simple HTML document
<!DOCTYPE html><html><head>
<title>MC 2016</title>
</head><body>
…</body></html>
Web Programming Networking Laboratory 21/68
2.3 HTML basic structure <!DOCTYPE>
Specify the type and version of HTML used in the web page
Complicated and unmemorable!
Web Programming Networking Laboratory 22/68
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. 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>.
Web Programming Networking Laboratory 23/68
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>
Web Programming Networking Laboratory 24/68
2.3 HTML basic structure Declaring 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">
Web Programming Networking Laboratory 25/68
2.3 HTML basic structure Character 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>
Web Programming Networking Laboratory 26/68
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
Web Programming Networking Laboratory 27/68
2.4 HTML5 new elements Why 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
Web Programming Networking Laboratory 28/68
2.4 HTML5 new elements Structure 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>
Web Programming Networking Laboratory 29/68
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.
Web Programming Networking Laboratory 30/68
2.4 HTML5 new elements <header> tag (2/2)
<header> example
<article><header><h1>Network traffic on Sep. 03, 2019</h1><p>Examiner: Somebody</p>
</header><p>Some logs</p>
</article>
Web Programming Networking Laboratory 31/68
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>
Web Programming Networking Laboratory 32/68
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>
Web Programming Networking Laboratory 33/68
2.4 HTML5 new elements <div>, <section>, and <article>
<div>
Generic container, a flow content element
<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
Web Programming Networking Laboratory 34/68
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>
Web Programming Networking Laboratory 35/68
2.4 HTML5 new elements <article> tag (2/2)
Example of an <article>
Web Programming Networking Laboratory 36/68
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>
Web Programming Networking Laboratory 37/68
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>
Web Programming Networking Laboratory 38/68
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.
Web Programming Networking Laboratory 39/68
2.4 HTML5 new elements <footer> tag
<footer> example
<footer>footer content…
</footer>
Web Programming Networking Laboratory 40/68
2.4 HTML5 new elements HTML5 Outliner
To help you outline your document right:
https://gsnedders.html5.org/outliner
https://github.com/h5o/
Web Programming Networking Laboratory 41/68
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
Web Programming Networking Laboratory 42/68
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>
Web Programming Networking Laboratory 43/68
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
Web Programming Networking Laboratory 44/68
2.5 Paragraph and Text format Text styling (2/3)
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>
Web Programming Networking Laboratory 45/68
2.5 Paragraph and Text format Text styling (3/3)
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
Web Programming Networking Laboratory 46/68
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>
Web Programming Networking Laboratory 47/68
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>
Web Programming Networking Laboratory 48/68
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.
Web Programming Networking Laboratory 49/68
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>
Web Programming Networking Laboratory 50/68
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">
Web Programming Networking Laboratory 51/68
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>
Web Programming Networking Laboratory 52/68
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.
Web Programming Networking Laboratory 53/68
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>
Web Programming Networking Laboratory 54/68
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>
Web Programming Networking Laboratory 55/68
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>
Web Programming Networking Laboratory 56/68
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>
Web Programming Networking Laboratory 57/68
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>
Web Programming Networking Laboratory 58/68
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>
Web Programming Networking Laboratory 59/68
2.6 Table and List Definition list (2/2)
<dt><dd>
Web Programming Networking Laboratory 60/68
2.7 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
Web Programming Networking Laboratory 61/68
2.7 More about 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>
Web Programming Networking Laboratory 62/68
2.7 More about 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>
Web Programming Networking Laboratory 63/68
2.7 More about 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>
Web Programming Networking Laboratory 64/68
2.7 More about 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 --
<!-- My web page --><p>Software courses are <!-- NOT --> a lot of fun!</p>
Web Programming Networking Laboratory 65/68
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 about HTML Special character entities
Character(s) Entity
<> < >
™ © ™ ©
π δ Δ π δ Δ
" & " &
Web Programming Networking Laboratory 66/68
2.7 More about 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>
Web Programming Networking Laboratory 67/68
2.7 More about 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>
Web Programming Networking Laboratory 68/68
2.7 More about HTMLColors
http://paletton.com/
https://visme.co/blog/website-color-schemes/