Scribd
Upload
8 views

L02 HTML

Uploaded by

123 456
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

L02 HTML

Uploaded by

123 456
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

CSC309 – LECTURE 02

HYPERTEXT MARKUP LANGUAGE (HTML)

Khai Truong
Markup languages
Provides control over the organization of a document’s content
● Specify content structure (e.g., titles, headers, paragraphs, groups
of texts/elements that belong together)
● Formats content for presentation

Example: LaTeX

https://data-mining.philippe-fournier-viger.com/wp-content/uploads/2017/02/latex.png
Standard Generalized Markup Language (SGML)
SGML is an ISO (Internet Organization for Standardization) standard
accepted in 1986
"A meta-language for generating descriptive markup languages"
(Coombs, Renear, and DeRose 1987) rather than a specific markup
language itself
● It only specify rules for tagging elements

Precursor to HTML and XML


HyperText Markup Language (HTML)
First proposed in 1989 by Sir Tim Berners-Lee (later released in 1993)

Official standard markup language used to create Web documents

Consists of a series of “elements” which labels the content (piece wise)


and tells the browser how to display the content

https://www.w3schools.com/html/html_intro.asp
Example
This is a comment.

This is a declaration specifying the


document format. It is not HTML
Semantic elements
HTML elements
Building blocks of a Web page
Declared using a tag
An element is everything from the start tag (or opening tag) to the end tag
(or closing tag)

Example:
<p>first paragraph</p>

Start tag Element content End tag

<p> first paragraph </p>


Regular elements
Declared using a start tag and an end tag (required)
Most HTML tags fall into this category
Can have nested elements or text

Example:
<section> start tag
<p>first paragraph</p> } paragraph element
section element
<p>second paragraph</p> } paragraph element
</section> End tag

Sometimes HTML elements will still display correctly, even


when you forget the end tag. But, don’t rely on this.
Void elements
Cannot have nested elements
Do not require end tag
Variants of HTML (e.g., XHTML) require self-closing
tag (e.g., <br />).
Example:
<br>
HTML standard, itself, does not require this.

Start tag Element content End tag

<br> none none

List of void elements: area, base, br, col, embed, hr, img, input, link, meta,
source, track, wbr
Basic HTML tags
<html>
● The root element
● All other tags must be declared within <html>...</html>
<head>
● The “invisible” part of an HTML document
● Contains metadata which typically define document title, character
set, styles, scripts, and other information about the document
<body>
● The “visible” part of an HTML document
Basic HTML tags (part 2)
<header>, <main>, <footer>
● <header> and <footer> are analogous to the header and footer of a
printed document
● <main> is the dominant content of the <body>

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>


● Headings typically used to name sections (and subsections) of the
document
● Headings typically have larger font sizes than normal text
● By default, <h1> is largest and is <h6> smallest
<p>
● Paragraph of text
Basic HTML tags (part 3)
<a>
● Anchor tag for specifying a hyperlink to another resource
● Example: <a href="https://www.google.com">Go to Google</a>
<img>
● Tag for embedding an image
● More accurately, it creates a holding space for the referenced
image
● Example: <img src="headshot.jpg">

Consult https://www.w3schools.com/html for a full list


HTML attributes
Attributes are specified in the start tag to provide additional
information about an element
Attributes come in name-value pairs (i.e., name=”value”)
All elements can have attributes
● Some tags have required attributes
● Different attributes are supported by different tags. Consult
https://www.w3schools.com/tags/ref_attributes.asp for the HTML
attribute reference.
● You can make your own attributes, which are ignored by browsers
HTML attributes (part 2; common attributes)
href
● The href attribute is used specify the URL of the resource linked by
an <a> tag
src, width, height, alt
● The src attribute specifies the URL of the image to be displayed
where an <img> tag is placed in the document
● The width and height attributes the dimensions of the image (in pixels)
● The required alt attribute specifies alternate text for an image
title
● The title attribute defines some extra information about an
element
● That information is displayed as a tooltip when mouse hovers over
the element
HTML attributes (part 3; identifiers)
id
● Specifies name of a unique element in the document
● Hyperlink can include id to jump to that element
(e.g., https://en.wikipedia.org/wiki/HTML#HTML_5 )
class
● specifies name(s) of class(es) in which elements with same class
share the same style and/or behavior
● Used extensively by CSS to style elements
HTML table
<table>
● Creates a table of rows and columns
Each row is specified by <tr>
Each cell is specified by <td> (table data) or <th> (table header)
The number of cells in a row should match the expected number of
columns
A cell can span multiple columns or rows
using the <colspan> and <rowspan>
attributes respectively
How would you do this?
HTML list
<ol>: Ordered list of elements prefixed with an ordinal value (e.g., a
number or letter)
<ul>: Unordered list of elements prefixed with a symbol (e.g., a circle
bullet)
<li>: List item inside either <ol> or <ul>

<dl>: Description list of term-description pair elements


Child elements must alternate between term <dt> and description <dd>
HTML form
<form>: Form which can contain different types of <input> elements to
gather data from the user

The lifecycle of a simple HTML form


1. allow the user to input data into its fields
2. then submit the data
3. reload the page
HTML form: input
<input>: Input fields where the user can enter data
Many different input types There is also a “hidden” input type allows
● Text-based: password, email
Web developers to include data that
● File upload: file
cannot be seen or modified by users when
● Button-like: radio, checkbox, submit
a form is submitted
● Dropdown : select
● Submit: button which submits all form values to server for
processing
Example:
<input type="text" name="first_name" size="60" required>

<textarea>: Multiline text input area


HTML form: label
<label>
● An inline element usually paired with an input element (usually as
caption for that item)
● The for attribute specifies which input element is associated with it
● The label can go before or after the input element
Example:
<div>
<input type="checkbox" id="subscribe" name="newsletter" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
</div>
HTML form: action
The action attribute specifies the URL of the HTTP request (typically server
side script that handles the input data) when the form is submitted

The method attribute specifies how to send input data when the form is
submitted
● GET: usually used for queries and filters (e.g., Google search)
○ Data is appended to the URL in name-value pairs
● POST: usually used for uploading files or submitting web form
○ data sent in body of HTTP request
Don’t use GET to send sensitive data!
GET is limited by the length of a URL
Form submissions with POST cannot be bookmarked
Non-semantic elements
Organizing elements
<div>: division tag
● Block level element
● Changes to a new line wherever defined
● Used extensively for organizing and
styling elements
● Can be styled to provide spacing and
alignment of child elements
<span>: span tag

● Inline element
● Allows styling of an inline element or text

https://media.gcflearnfree.org/content/5e82363212da9215e057b928_03_30_2020/block_vs_inline_diagram.png
Some notes about writing HTML
Whitespaces in HTML files are ignored
Preformatted text
Browsers can be asked to preserve spaces and line breaks when
rendering text inside the <pre> tag.
Often used to show source code
HTML entities
Characters are used by the HTML language (e.g., “<”)
Those characters must be replaced by their HTML entity equivalence
(which starts with ampersand, followed by entity name or number,
and ends with a semicolon)
E.g., to display <, &lt; or &#60; is used instead

Consult https://www.w3schools.com/html/html_entities.asp for a list


of the common entities
HTML validation
Helps you identify issues with your HTML code
Detects many types of issues
● Syntax error (e.g., missing a closing tag)
● Semantic error (e.g., missing required elements, such as <title>)
● Warnings (i.e., not critical issues, but would be nice to fix)

Go to https://validator.w3.org/
Summary
You have learned about 80% of the HTML tags needed for A1
Learn more on your own: http://www.w3schools.com/html
Experiment, search online, and/or read reference manuals

Next week: customizing the presentation with Cascading Style Sheets


(CSS)
Much of this lecture was taken from content previously created by Jack Sun & Kianoosh Abbasi

Reproduction and/or sharing of course materials is prohibited. Course materials include lecture slides, course notes,
assignments, data and documents provided by the instructors. Course materials created by the instructors of this course
are their intellectual properties. They may not be shared, posted, rehosted, sold, or otherwise distributed and/or
modified without expressed permission from the authors. All such reproduction or dissemination is an infringement of
copyright and is prohibited. All rights are reserved by the instructors.

Thank you & questions?

You might also like