Scribd
Upload
38 views

01 HTML

This document provides an overview of HTML, CSS, and JavaScript for frontend web development. It begins with an introduction to HTML for defining page structure and content. It then covers key HTML elements and tags for layout, forms, tables, and embedding media. The document also discusses using CSS for styling and JavaScript for interactivity. Finally, it provides examples of HTML pages and best practices for semantic structure and accessible forms.

Uploaded by

ahmednooh1402
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

01 HTML

This document provides an overview of HTML, CSS, and JavaScript for frontend web development. It begins with an introduction to HTML for defining page structure and content. It then covers key HTML elements and tags for layout, forms, tables, and embedding media. The document also discusses using CSS for styling and JavaScript for interactivity. Finally, it provides examples of HTML pages and best practices for semantic structure and accessible forms.

Uploaded by

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

Course Roadmap HTML for page

content & structure


Frontend
development CSS for styling
Web Client

JavaScript for
Response
Request

interaction

Web API

Backend
development Data Management

Dynamic Content
Web Server
2
Outline
• Introduction to HTML
• Page Structure
• Tables
• Media tags
• Forms

2
3
HTML, CSS & JavaScript
• HTML
– HTML stands for Hyper Text Markup Language
– An HTML file is a text file containing markup tags
– Describe the content & the logical structure of a page
using markup tags
• HTML page consists of a base HTML-file which may
includes several referenced resources such as:
– CSS is a style sheet language used to control the presentation
and formatting of an HTML document
– Javascript used for client side scripting of behavior/
functionality such as validation, animation and partial page
refresh (by asynchronously getting content from the server)
– Images, audio files, etc.
4
Html page has head and body
• HTML uses tags to differentiate between
document content
• Tags are enclosed in angle brackets < … >
• Generally come in pairs <tag> … </tag>

Page settings Page Content


<head> <body>
<title>Page Title</title> <h1>Heading 1</h1>
<meta name="description" <h2>Sub heading 2</h2>
content="This is an <h3>Sub heading 3</h3>
example.">
<p>First paragraph</p>
</head>
<p>Second paragraph</p>
</body>
5
HTML – Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
<meta charset="UTF-8">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<p>This is a paragraph</p>
<div>This is a div</div>
</body>
</html>
6
HTML key capabilities
• Define the logical structure of the HTML
document
• Collect input from users using Forms
• Display data using tables
• Embed media (e.g., audio and video) into
HTML documents
• Other capabilities such drawing graphics in
canvas, etc.

7
Page Structure

8
Page Structure

<header>
<nav>
<main>
<section>
<article>
• We can use Semantic Tags to define the
<aside> logical structure of the page
• We can use css to arrange elements into the
<footer> desired layout
Which one to use? http://html5doctor.com/downloads/h5d-sectioning-flowchart.png 9
Header, Nav, Aside & Footer
<header>
a container for introductory content, logo or a set
of navigational links
<nav>
contains primary navigation (frequently inside a header)
<footer>
contains information about copyright, contact
info, facebook/twitter links etc.
<aside>
may contain sidebars, pullquotes, ads, etc.
(can be removed without reducing the meaning of the main content)
10
Article & Section
• <article>
defines self-contained content that would make
sense when read on its own (e.g., blog post). e.g.,
https://www.w3schools.com/tags/tag_main.asp

• <section>
a thematic grouping of content. It is used to divide
either the page into different subject areas, or to
section an individual article.
Think of it like a newspaper: You will find many articles in each
section. e.g., Film review articles in the Entertainment section.
12
<main> contains blog entries. Each blog An article can be structured using
entry would make sense when read on its sections. For example, a blog post can
own have an introduction, a body content and
a summary.
<div> vs. Semantic tags
– a <div> element is used a generic container of other
elements
– semantic tags are designed to describe the page content in
a more meaningful way
• Use semantic tags to "mark up" content in a
meaningful way
– The elements that you choose to mark up your content
should describe the content
• Mark your document elements based on on their role
– If you need an element to describe a paragraph of content
then use a <p>
– If you need a generic container then use a <div>

13
37
HTML Tables
• Tables represent tabular data
– A table consists of one or several rows
– Each row has one or more columns
• Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create a table column

38
Simple HTML Tables – Example
<table>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecturedemos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table> 39
Complete HTML Tables
• Table rows split into three semantic sections:
header, body and footer
– <thead> denotes table header and contains
<th> elements, instead of <td> elements

– <tbody> denotes collection of table rows that


contain the data
– <tfoot> denotes table footer but comes BEFORE
the <tbody> tag

41
Complete HTML Table: Example
<table>

<thead> header th
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
footer
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
Last comes the body (data)
<tbody>
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>

</table>

42
Complete HTML Table: Example (2)

<table>
<thead>

<tr><th>Column 1</th><th>Column 2</th></tr>

</thead>

<tfoot>

<tr><td>Footer 1</td><td>Footer 2</td></tr>

</tfoot> Although the footer is


<tbody> before the data in the
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> code, it is displayed last
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>

</tbody>

</table>

43
45
Img / Audio / Video Tag

<img src="cat.jpg" alt="A black, brown, and white cat">

22
14
Forms
• Forms are used to collect input from the user and
submitting it to a Web server
• A form can have many input elements each has a
name and id
– Name identifies the input when the form is submitted
– Id is used to access the element from JavaScript or CSS

15
Text input

18
HTML 5 input fields
• Input element enables multiple input types
<input type="search"> search box
<input type="number"> spinbox
<input type="range"> slider
<input type="color"> color picker
<input type="tel"> telephone number
<input type="url"> web address
<input type="email"> email address
<input type="date"> calendar date picker
<input type="month"> month
<input type="week"> week
<input type="time"> time
<input type="datetime"> date time
<input type="datetime-local"> local date and time
Selections
• Select, checkbox and radio enable pre-defined input

20
Dropdown and List Examples
• Dropdown

• Multi selections list

21
Radio button and Checkbox Examples
• Radio button

• Checkbox

22
Input attributes
• Apply attributes to control rendering

23
Input commands

24
Form organization
• Labels
– Text explicitly associated with an input
– Interaction with label moves focus to input

• Fieldsets
– Groups form input fields
– Optionally label the group

25
26
<input placeholder=“Full Name”>
• Disappears as the user types.
• NOT a replacement for a proper label

<input required>

• Validated by the browser

<input autofocus>
• Auto selects the first input field with autofocus
• Will scroll the page to give it focus. 27
<input pattern="[a-zA-Z0-9]+"
title=“Letters and numbers only please”>
• Matches a regular expression
• Only validates if something has been entered
• Error message is non-specific. Some browsers will use
title attribute to explain
• Use the title attribute to add additional help text
- This works with all the input types

28
<input type=“email”>
• For email addresses
• Is validated as an email address
• Gives email keyboard

29
<input type=“url”>
• For urls
• Gives url keyboard
• Is loosely validated as a url
- Use in combination with pattern if you want something specific

30
<input type=“tel”>
• For phone numbers
• Gives number pad
• Very loosely validated
o Handy since the nice big number pad is handy
for inputting any number so you can use it for
anything else you like
o Use with pattern if you have
something specific in mind

31
<input type=“number”>
• For numbers. Also called a “spinbox”
• Gives number keypad
• Special attributes:
• min
• max
• step

33
<input type=“range”>
• For numbers. Also called a “slider”
• Exact number not displayed to user
• Special attributes:
• min
• max
• step

34
<input type=“date”>
• Displays a date picker
• Configurable formats:
• type=“date”
• type=“datetime”
• type=“datetime-local”
• type=“month”
• type=“week”
• type=“time”

35
<input type=“text”
list=“sources">
<datalist id=“sources">
<option>Professor</option>
<option>Master</option>
</datalist>

• Text box with filtered list of


suggestions
• Entire list isn’t usually visible,
appears as user types, filtered
by what they’ve entered
36
References
• Mozilla Development Center HTML5
o https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/HTML5
o https://developer.mozilla.org/en-
US/docs/Learn/HTML/Introduction_to_HTML

• HTML tutorial
o http://www.w3schools.com/html/

• Cheat sheet
o https://htmlcheatsheet.com/

44

You might also like