Scribd
Upload
38 views

(X) HTML Ii: CMPS 246: Web Programming

This document provides an overview of HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language). It discusses HTML history and syntax, including tags for paragraphs, headings, lists, links, tables, and more. It also covers validating code and the differences between HTML and XHTML.

Uploaded by

Mohammad Sidani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

(X) HTML Ii: CMPS 246: Web Programming

This document provides an overview of HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language). It discusses HTML history and syntax, including tags for paragraphs, headings, lists, links, tables, and more. It also covers validating code and the differences between HTML and XHTML.

Uploaded by

Mohammad Sidani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

(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
3/8/2021 Web Programming 2
HTML History

In this course, HTML5 is


used, but with XHTML
syntax rules
3/8/2021 Web Programming 3
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

3/8/2021 Web Programming 5


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

3/8/2021 Web Programming 6


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

3/8/2021 Web Programming 7


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>

3/8/2021 Web Programming 8


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

3/8/2021 Web Programming 9


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

3/8/2021 Web Programming 10


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

3/8/2021 Web Programming 11


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>
<li> list item 2 </li>
<li> list item 3 </li>
</ul>

3/8/2021 Web Programming 12


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>
<li> list item 1 </li>
<li> list item 2 </li>
<li> list item 3 </li>
</ol>

3/8/2021 Web Programming 13


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

3/8/2021 Web Programming 14


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

3/8/2021 Web Programming 15


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>

3/8/2021 Web Programming 16


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>
3/8/2021 Web Programming 17
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

3/8/2021 Web Programming 18


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>

3/8/2021 Web Programming 19


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
3/8/2021 Web Programming 20
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

3/8/2021 Web Programming 21


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>
3/8/2021 Web Programming 22
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.

3/8/2021 Web Programming 23


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

3/8/2021 Web Programming 24


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.

3/8/2021 Web Programming 25


<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

3/8/2021 Web Programming 26


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

3/8/2021 Web Programming 27


<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

3/8/2021 Web Programming 28


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

3/8/2021 Web Programming 29


<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

3/8/2021 Web Programming 30


<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>
3/8/2021 Web Programming 31
<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>

3/8/2021 Web Programming 32


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

3/8/2021 Web Programming 33


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

3/8/2021 Web Programming 34


Select Element <select>

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

3/8/2021 Web Programming 35


Select Element <select>
• 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>
3/8/2021 Web Programming 36
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

3/8/2021 Web Programming 37


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

3/8/2021 Web Programming 38


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.

3/8/2021 Web Programming 39


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>

3/8/2021 Web Programming 40


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>

3/8/2021 Web Programming 41


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

3/8/2021 Web Programming 42

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy