HTML INTRO
CS 405/ENCS
401
HyperText Markup Language (HTML) – Wikipedia
Definition
• HTML is the standard markup language for documents designed to
be displayed in a web browser.
• Web browsers receive HTML documents from a web server or from
local storage and render the documents into multimedia web
pages.
• HTML describes the structure of a web page semantically.
2
HTML Info
• The World Wide Web Consortium (W3C) develops and
maintains HTML specifications
• HTML documents are files in a specific format
• The extension is either .html (mostly used one) or .htm (the
old one)
3
HTML Source vs. Rendered View
Rendered View Source HTML
4
HTML Tag & Attribute
• Browsers do not display the HTML tags but use them to interpret the content of
the page.
• All HTML pages have a series of HTML elements
• Tag: tells the web browser where an element begins and ends
• Attribute: describes the characteristics of an element.
• General form & empty HTML elements:
• <tag attribute1="value1" attribute2="value2">content</tag>
• <tag attribute1="value1" attribute2="value2">
5
Getting Started
Type html then select html5 option then press ENTER 6
First html page
How did we know about writing html:5 and pressing enter would generate useful
code:
https://docs.emmet.io/cheatsheet-a5.pdf 7
Emmet Documentation – VSCode version might have
small differences
8
There are 2 main sections in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HEADING</h1>
</body>
</html>
head Tag: general information about the webpage
body tag: the content of the webpage
There is a tree structure to represent items which we will cover in detail later on. 9
Tags & Attributes
• Doctype Tag for HTML5:
• <!DOCTYPE html>
• Doctype Tag for HTML 4:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
• html Tag: anything inside the tag is html
• <html>hello world</html>
• lang Attribute: specify the language of the webpage
mainly for Search Engine Optimization (SEO) and
screen readers
• charset attribute: the character set being used (UTF-8
is good enough fore representing most languages)
• title tag: what you see at the top of the browser
10
How do we really represent characters?
• ASCII?
• What about ç, ğ, ı, ö, ş, ü?
• 学校
• ทรง
• ทรง
https://stackoverflow.com/questions/45463700/thai-character-not-rendered-correctly-in-pdf font family is also important.
11
UTF8
• Unicode (or Universal Coded Character Set) Transformation Format – 8-bit
• UTF-8 is capable of encoding all 1,112,064 valid character code points in Unicode using one to four one-byte (8-bit)
code units.
• Code points with lower numerical values, which tend to occur more frequently, are encoded using fewer bytes.
• It was designed for backward compatibility with ASCII: the first 128 characters of Unicode, which correspond one-to-
one with ASCII, are encoded using a single byte with the same binary value as ASCII.
• If you see one of the following characters in your screen it is most likely that the encoding was not defined properly
• �֎֏��ׁׂ׀ׇ׆
ׅׄ׃
12
Heading Tag
• If you want to include a header in your webpage, you can use h tag.
• It has 6 different options
13
Paragraph Tag
• The <p> tag defines a paragraph.
• Browsers automatically add a blank space before and after each <p> element.
14
Pangram?
• Covered it in CS 101 – does anyone remember it?
• Why do we see certain phrases in examples?
• “The quick brown fox jumps over the lazy dog”
• What about “Lorem ipsum”?
15
TAG Open & Closure
• The HTML tag tells the browser what element to show
• <p>
• Never forget closing the tag
• </p>
16
Empty Tag Examples (no ending /> )
<br> Single line break
<hr> Horizontal line
17
Why would I use <br>?
• Let’s play with codepen https://codepen.io/pen/?editors=1000
• In order to get the html page on the right, instead of <br> tag
• I will simply use new line?
• I will add an empty <p></p>
• I will put each line on a separate p tag.
Who ate my new line OK looking but not valid OK looking, valid but not exact
(1st and 2nd lines have a gap) 18
Why would I use <br>?
• This is a simple mark up language, don’t expect too much from it.
• Even though it looks like you want it to, it might not be proper HTML.
When you deviate from the standard, you are asking for trouble
• Errors in older browsers.
• Can also crash DOM and XML software.
• You can use online validators (e.g. https://validator.w3.org/nu/#textarea)
Who ate my new line OK looking but not valid OK looking, valid but not exact
(1st and 2nd lines have a gap) 19
Strong & Emphasis vs. Bold & Italic
Prefer Avoid if you can
• <strong> defines important text • <b> defines bold text
• <em> defines emphasized text • <i> defines italic text
• We prefer HTML for semantic. Below, we use <em> to tell it is not an • We prefer using CSS for styling rather than HTML
actual queen but a name to an aircraft
• Queen Mary landed on water today
Text Formatting & div Tag
• https://www.w3schools.com/html/html_formatting.asp
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
• <div> - Representing a division (This will become handy for styling a group of items) 21
Basic Tags
22
Lists
23
div tag
• Content division: Used for division and grouping purposes
24
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value“
• In the example below, title is an attribute
• <p title="Unordered List">Trees I love in no particular order</p>
• When we specify the title attribute on an item, we add a hover over text (the
text will show up when the user hovers over the item)
25
HTML Attributes (Cont.)
• The HTML standard does not require quotes around attribute values.
• However, W3C recommends quotes in HTML, and demands quotes for stricter document
types like XHTML.
• Good:
• <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
• Bad:
• <a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
• Evil:
• <a href=https://www.w3schools.com/html/>Visit our HTML tutorial
• Always close your tags
26
HTML Info
• HTML is not case sensitive
• However, W3C recommends lowercase attributes in HTML, and demands lowercase
attributes for stricter document types like XHTML.
• Comments are not displayed on the page
• <!--This is a comment tag-->
• Double quotes around attribute values are the most common in HTML, but single quotes
can also be used.
• In some situations, when the attribute value itself contains double quotes, it is necessary
to use single quotes
• <p title='John "ShotGun" Nelson’>
• <p title="John 'ShotGun' Nelson"> 27
HTML Info (Cont.)
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different results.
• With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
• The browser will automatically remove any extra spaces and lines when the page is displayed. See the
sample below from W3Schools
28
Anchor Tag (Link)
The link's destination is specified in the href attribute.
29
Location attributes (href, src, etc.)
In html, there are 2 ways to specify the location of an item
1. Absolute URL - Links to an external image that is hosted on another website.
• Example: src="https://www.w3schools.com/images/img_girl.jpg".
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name.
• If the URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg".
• If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".
• Tip: It is almost always best to use relative URLs. They will not break if you change domain.
30
Anchor Tag (Cont.)
31
src
• Location on the web
• Path on your web site (e.g. “PineTrees.html”)
32
33
Mail href
<a href="mailto:[email protected]">Mail</a>
34
Phone href
<a href="tel:5551234567">Phone</a>
35
Image Tag
36
Image Tag Sample
37
Image Tag (cont.)
• Why is the image humongous?
• <img src="https://duz1zqzp328bb.cloudfront.net/conifers/_galleryFullSize/
IMG_0803.jpg" alt="Pine trees image">
• How can we scale it?
• <img src="https://duz1zqzp328bb.cloudfront.net/conifers/_galleryFullSize/
IMG_0803.jpg" alt="Pine trees image" width="400" height="300">
38
Alt Attribute
• The required alt attribute for the <img> tag specifies an alternate
text for an image
• Why do we need it?
• If the image for some reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute
• If the user uses a screen reader.
39
Tables
40
Tables (Cont.)
41
cellspacing
• <table> • <table cellspacing="10">
42
Table Documentation
43
Table Documentation
44
Tables vs CSS
• Tables are for structuring
• Most styling attributes are deprecated
• It is cumbersome and hard to read an HTML styled through
tables
• CSS is for styling
45
Join a mailing list example structure (no JavaScript
yet)
46
Input Element Types
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
47
How to see if an operation is get/post etc.
48
THANK
YOU
49
