(X) HTML Ii: CMPS 246: Web Programming

(X)HTML II
CMPS 246: Web Programming
3/8/2021 Web Programming 1

HyperText Markup Language
• Markup Language
• Used to mark parts of documents to
indicate how they should appear
• Hypertext
• Text with embedded links to text in
the same or another document
• Non-sequential browsing of textual
material
HTML History
In this course, HTML5 is

used, but with XHTML
syntax rules
XHTML Document Structure
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Lama Affara">
<title>My Webpage</title>
</head>
<body>
Hello World!
</body>
</html>
4
HTML Syntax
• HTML Tags
• <p></p> paragraph
• <pre></pre> Preformatted text
• <h1></h1> Heading (1 to 6)
• <blockquote></blockquote> Quotation
• <br/> Line Break
• <img /> Image
• Comments
• Character entities
• Font Styles and sizes

HTML Validation
• It is important to write proper HTML code and follow proper syntax
• Why use valid HTML and web standards?
• More rigid and structured language
• More interoperable across different web browsers
• More likely that our pages will display correctly in the future
• Can be interchanged with other XML data: SVG (graphics), MathML, MusicML,
etc.
• More picky than the browser, which may render bad HTML correctly

HTML Validation
• Use tools to validate your (X)HTML code
• Official options:
• Download the validation tool from
http://totalValidator.com and use it on the
document
• Use W3C Markup Validation Service
https://validator.w3.org/#validate_by_upload
• Other options
• Install VSCode HTMLHint Extension

XHTML Validation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is a paragraph</p>
<div>
<img src="images/img.PNG" alt="uiuy"/>
</div>
</body>
</html>

HTML vs XHTML
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden

HyperText Links <a href=“”>
<a href = "week3.html"> Click here to
access week 3</a>
specified with the href The target page the visual link in the
(hypertext reference) document
attribute

HyperText Links <a href=“#”>
<a href = "week3.html#imgSection"> week 3</a>
Target label: Link to a

section in target
Week3.html
…
<h2 id="imgSection"> Example Image </h2>
…

Unordered Lists <ul>
• Unordered lists
• List is the content of the <ul> tag
• List elements are the content of the <li> tag
<ul>
<li> list item 1 </li>
</ul>

Ordered Lists <ol>
• Ordered lists
• The list is the content of the <ol> tag
• Each item in the display is preceded by a sequence value
<ol>
</ol>

Nested lists
• Any type list can be nested inside any type list
• The nested list must be in a list item
What is the html code for the below list? <ul>

<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul

Definition/Description Lists <dl>
• Definition lists (for glossaries, etc.)
List is the content of the

<dl> tag (description list)
<dl>
<dt>Coffee</dt>
Terms being defined
<dd>- black hot drink</dd>
are the content of the
<dt> tag (data term) <dt>Milk</dt>
<dd>- white cold drink</dd>
The definitions themselves </dl>
are the content of the
<dd> tag (data definition) List Exercises

Tables <table>
• A table is a matrix of cells, each possibly having content
• The cells can include almost any element
• Some cells have row or column labels and some have data
• In HTML5, tables do not have lines between the rows or between the
columns
• We can add those with Cascading Style Sheets (CSS)
<table>
<caption> Fruit Juice Drinks </caption>
Table title <!– table content -->
</table>

Table Content <tr>, <th>, <td>
<table>
<caption> Fruit Juice Drinks </caption>
<tr>
<tr> tag (table row)
<th> </th>
A row element <th> Apple </th>
<th> Orange </th>
<th> Screwdriver </th>
</tr>
<th> tag (table heading)
<tr>
Contents of the headings <th> Breakfast </th>
automatically bold <td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>
<td> tag (table data) <tr>
<th> Lunch </th>
Contents of the data cells. <td> 1 </td>
Can contain all sorts of HTML <td> 0 </td>
elements: text, images, lists, <td> 0 </td>
other tables, etc. </tr>
</table>
Table Style
• In HTML5, tables do not have lines between the rows or between the
columns
• can be added with CSS (more about it later)
• For now, add the following style element into the head element
Add a border to the table elements

<style>
with
table, th, td {
• line width 1px
border: 1px solid black;
• solid style
border-collapse: collapse;
• Black color
}
collapse the borders into one </style>
border

colspan Table Attribute
To make a cell span more than one column add a colspan attribute
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

rowSpan Table Attribute
To make a cell span more than one row add a rowspan attribute
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table> Table Exercises
Forms
• A form is the usual way information is gotten from a browser user to a
server
• When the Submit button of a form is clicked, the form’s values are sent
to the server for processing

Form Element <form>
• The HTML <form> element is used to create an HTML form for user
input
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
<form>
.
form elements
.
</form>
Form Attributes
• The action attribute defines the action to be performed when the
form is submitted
• Usually, the form data is sent to a file on the server when the user clicks on
the submit button.
• For now, leave it blank (more on this later)
• The autocomplete attribute specifies whether a form should have

autocomplete on or off.
• When autocomplete is on, the browser automatically complete values based
on values that the user has entered before.

Form Elements and Types
text
radio
checkbox
submit
input type attribute
file
label for attribute
password
optgroup
select hidden
form opt
textarea value
button
fieldset
legend

Input Element <input>
• One of the most used form element is the <input> element.
• The <input> element can be displayed in several ways, depending on
the type attribute.

<input type="text">
<form>
<label> element <label>First name:<br/>
<input type="text"/><br/>
<input> element </label>
should be placed in <label>Last name:<br/>
label elements <input type="text"/><br/>
</label>
</form>
Input type text
• Default size is 20; it can be
changed with the size attribute
• If you don’t want to allow the
user to type more characters
than will fit, set maxlength

<input type=“password">
• Password – just like text except asterisks are displayed, rather than
the input characters
<form>
<label>Username:<br/>
<input type="text"/><br/>
</label>
<label>Password:<br/>
<input type="password"/><br/>
</label>
</form>

<input type = "checkbox" >
• Used to collect multiple choice input
• Every checkbox requires a value attribute, which is the widget’s value
in the form data when the checkbox is ‘checked’
• A checkbox that is not ‘checked’ contributes no value to the form data

<input type = "checkbox“ >
<form>
<label>
<input type = "checkbox" name ="groceries" value = "milk" checked = "checked" />
Milk
</label>
<label>
<input type = "checkbox" name ="groceries" value = "bread" />
Bread
</label>
<label>
<input type = "checkbox" name ="groceries" value= "eggs" />
Eggs
</label>
</form>

<input type = “radio“>
• collections of checkboxes in which only one button can be ‘checked’

at a time
• Every button in a radio button group MUST have the same name

<input type = “radio“>
<form>
<label>
<input type = "radio" name = "age" value = "under20" checked = "checked" />
0-19
</label>
<label>
<input type = "radio" name = "age" value = "20-35" />
20-35
</label>
<label>
<input type = "radio" name = "age" value = "36-50" />
36-50
</label>
<label>
<input type = "radio" name = "age" value = "over50" />
Over 50
</label>
</form>
<input type = “submit”>
• Submit has two actions:
1. Encode the data of the form
2. Request that the server execute the server-resident program specified as
the value of the action attribute of <form>
• A Submit button is required in every form
<form>
... form elements ...
<input type="submit" value="Submit">
</form>

Input Element <label>
• The <label> element defines a label for several form elements.
• The for attribute of the <label> tag should be equal to the id attribute
of the <input> element to bind them together.
<label for="fname">First name:</label>

<input type="text" id="fname" >

Select Element <select>
• The select element defines a drop down list

<form>
Select grocery item
<select name = "groceries">
<option> milk </option>
<option> bread </option>
<option> eggs </option>
<option> cheese </option>
</select>
</form>

• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the option
<option selected> bread </option>
• set the size attribute to specify the number of visible values.

<select name = "groceries" size="1">
• Use the multiple attribute to allow the user to select more than one
value.
<select name = "groceries" multiple>
Textarea Element <textarea>
• The <textarea> element defines a multi-line input field (a text area).
• The rows attribute specifies the visible
number of lines in a text area.
• The cols attribute specifies the visible
width of a text area.
• Scrolling is implicit if the area is overfilled

Textarea Element <textarea>
Please provide your employment aspirations
<form>
<textarea name = "aspirations" rows = "3" cols = "40">
(Be brief and concise)
</textarea>
</form>

Audio Element <audio>
• To play an audio file in HTML, use the <audio> element.
The controls attribute adds audio

<audio controls>
controls, like play, pause, volume. <source src="song.mp3" type="audio/mpeg">
Audio not supported in browser
The <source> element allows you to
specify alternative audio files
</audio>
The text between the <audio> and

</audio> tags will only be displayed
in browsers that do not support the
<audio> element.

Video Element <video>
• To play a video file in HTML, use the <video> element.
<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4>
<source src="mov_bbb.ogg" type="video/ogg>
Your browser does not support HTML video.
</video>

YouTube Videos <iframe>
• Upload the video to YouTube
• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify
the dimension of the player
<iframe width="420" height="345"

src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

Organization Elements
• <header> - Defines a header for a document
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-
contained content
• <aside> - Defines content aside from the
content (like a sidebar)
• <footer> - Defines a footer for a document or a
section

(X) HTML Ii: CMPS 246: Web Programming

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

(X) HTML Ii: CMPS 246: Web Programming

Uploaded by

Copyright:

Available Formats

(X)HTML II

CMPS 246: Web Programming

3/8/2021 Web Programming 1

In this course, HTML5 is

3/8/2021 Web Programming 5

3/8/2021 Web Programming 6

3/8/2021 Web Programming 7

3/8/2021 Web Programming 8

3/8/2021 Web Programming 9

3/8/2021 Web Programming 10

Target label: Link to a

3/8/2021 Web Programming 11

3/8/2021 Web Programming 12

3/8/2021 Web Programming 13

What is the html code for the below list? <ul>

3/8/2021 Web Programming 14

List is the content of the

3/8/2021 Web Programming 15

3/8/2021 Web Programming 16

Add a border to the table elements

3/8/2021 Web Programming 18

3/8/2021 Web Programming 19

3/8/2021 Web Programming 21

• The autocomplete attribute specifies whether a form should have

3/8/2021 Web Programming 23

3/8/2021 Web Programming 24

3/8/2021 Web Programming 25

3/8/2021 Web Programming 26

3/8/2021 Web Programming 27

3/8/2021 Web Programming 28

3/8/2021 Web Programming 29

• collections of checkboxes in which only one button can be ‘checked’

3/8/2021 Web Programming 30

3/8/2021 Web Programming 32

<label for="fname">First name:</label>

3/8/2021 Web Programming 33

3/8/2021 Web Programming 34

3/8/2021 Web Programming 35

• set the size attribute to specify the number of visible values.

3/8/2021 Web Programming 37

3/8/2021 Web Programming 38

The controls attribute adds audio

The text between the <audio> and

3/8/2021 Web Programming 39

<video width="400" controls>

3/8/2021 Web Programming 40

<iframe width="420" height="345"

3/8/2021 Web Programming 41

3/8/2021 Web Programming 42

You might also like