Scribd
Upload
30 views

Chris Walshaw Computing & Information Systems University of Greenwich

HTML is the language used to structure and present content on the web. It uses tags to mark up paragraphs, headings, lists, links, and other elements. CSS is used to style and lay out HTML elements. Key HTML elements include <head> for metadata, <body> for content, headings <h1>-<h6>, paragraphs <p>, lists <ul>/<ol>/<li>, links <a>, and tables <table>/<tr>/<td>. CSS code can be embedded within HTML or linked externally. Separating content from presentation keeps HTML and CSS modular.

Uploaded by

Hari pro
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views

Chris Walshaw Computing & Information Systems University of Greenwich

HTML is the language used to structure and present content on the web. It uses tags to mark up paragraphs, headings, lists, links, and other elements. CSS is used to style and lay out HTML elements. Key HTML elements include <head> for metadata, <body> for content, headings <h1>-<h6>, paragraphs <p>, lists <ul>/<ol>/<li>, links <a>, and tables <table>/<tr>/<td>. CSS code can be embedded within HTML or linked externally. Separating content from presentation keeps HTML and CSS modular.

Uploaded by

Hari pro
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 45

HTML

Chris Walshaw
Computing & Information Systems
University of Greenwich

1
Lecture Objectives

• An introduction to HTML
­ tags & attributes
­ anatomy of a webpage
­ some basic HTML elements
• A little about CSS
­ location & usage
• HTML forms
­ interaction with JavaScript
­ DOM manipulation
­ form input types
2
Motivation

• If you have done any messing around with


webpages or websites, some of this may
be familiar
• However we will go back to square one so
that everyone has the same level of
understanding

3
HTML

• HTML or HyperText Markup Language is


the language of the web – every web
page uses it
­ it is a markup language, not a programming
language
• An HTML file contains both formatting
tags and content
­ the content is what we see on the webpage
­ tags are the HTML markup codes that control
the appearance / formatting of the content
http://www.w3schools.com/html/default.asp 4
Tags

• Tags are markup that control how the


browser displays the content
• For example, the HTML code might say
This is a sentence with some
<b>bold</b> text in it.

• The browser would display this as


This is a sentence with some bold text in it.

5
Tag syntax
• An HTML element usually consists of a start tag and end tag,
with the content inserted in between, e.g.
<title> This is the page title </title>
start tag content end tag
• The HTML element is everything from the start tag to the end
tag
• Extra whitespace / line-breaks in the HTML are ignored by the
browser
­ i.e. the following is essentially identical to the version above
<title>
This is the page title
</title>
6
Attributes

• Optionally a start tag may include one or


more attributes
• Attributes declare addition information about
the element
• Attributes usually come in name/value pairs,
e.g. id="input" width="100"
name value name value
• You do not always need quote marks around
the value, but it is strongly recommended
7
Empty elements

• HTML elements with no content are called


empty elements
• Empty elements do not need an end tag, e.g.
­ <br> indicates a line-break
­ <hr> indicates a horizontal rule (a line)
• In earlier versions of HTML these needed to
be self-closing, e.g. <br/>, <hr/>
• This is no longer required in HTML5 but you
may often see them

8
Nesting
• Tags may be nested, e.g.
<head>
<title>
This is the page title
</title>
</head>

• However they must be closed in reverse order


­ i.e. you must close the most recently opened tag first of all
<head>
<title>
This is the page title
</head>
this is an error – the <title> tag must
</title> be closed before the <head> tag
9
HTML errors?
• What happens if you get it wrong? For example:
­ unclosed tags
­ incorrect nesting
­ misspelt tags
• Mostly the browser will try to figure out what you meant
and often it will get it right
• However, there are many different browsers now
­ desktop: Chrome, Safari, Firefox, Internet Explorer, Edge, Opera,
SeaMonkey, …
­ mobile: all of the above, Android, BlackBerry, Nokia, …
­ other devices: Nintendo, Playstation, Kindle, …
• … with many, many versions …
• … on several operating systems
1
0
HTML testing

• You cannot possibly test even the simplest


web page using every single version of every
browser on every operating system
• Best to make sure the HTML code is correct
­ can use validation services, e.g. html5.validator.nu
­ demo: www.bbc.co.uk
• Fortunately, NetBeans helps spotting / fixing
HTML errors too
­ error highlighting, hints, code completion, …

1
1
Anatomy of a web page
• Each webpage should start with a doctype tag
which declares which version of HTML is being
used
• Everything else should be enclosed in between an
<html> start and end tag
­ optionally the start tag may declare the language of the
content as an attribute
this is the doctype for HTML5
<!doctype html>
html start tag (also declares
<html lang="en"> the content to be English)
page content
...
html end tag
</html>
1
2
The page <head>

• Although it can be omitted in HTML5,


each page usually has a <head> element
• The head contains metadata (data about
data) which gives information about the
HTML document
• Metadata is not displayed in the browser
• Typical metadata tags are <title>,
<style>, <meta> & <link>

1
3
Basic HTML (Example 01)

• An example <head> element


­ CSS code defines how the HTML is displayed

link to a CSS style file

some embedded CSS styling

more about CSS


later in the lecture
1
4
The page <body>
• The page content goes in the <body> element
• There are many HTML elements that can be
included – some common ones are:
­ headings: <h1>, <h2>, <h3>, …
­ paragraph: <p>
­ line-break: <br>
­ text formatting: <b>, <em>, <mark>, <del>, …
­ comment: <!-- … -->
­ horizontal rule: <hr>
­ tables: <table>, <tr>, <th>, <td>
­ lists: <ul>, <ol>, <li>
­ hyperlink: <a>
1
5
<h*> headings

• <h1>, <h2>, …, <h6> define headings

the colour is defined by the CSS


and is not inherent to the h tag
1
6
<p> paragraph
and text formatting
• The <p> tag and some formatting

1
7
Table

• Tables typically contain a number of


nested elements
­ the table, <table>, which may contain
• a caption, <caption>
• table rows, <tr>, which may contain
– table column headers, <th>
– table cells/data, <td>

1
8
<table> elements

• All the styling is defined by the CSS

a cell spanning 2 columns

1
9
List elements

• Unordered and ordered lists are easy


­ each item must be contained in an <li> tag

2
0
Hyperlinks

• The real power of HTML is the way that


text is linked to other pages using
hyperlinks
­ hence the name HyperText Markup Language
­ often referred to as links
• Enables the reader to jump to a different
section in the same page or, often, to a
different page entirely
• Hyperlinks use the <a> anchor tag
2
1
<a> tag syntax
• The syntax of the <a> tag is typically
<a href="URL">link text</a>
• The link text is displayed on the page by the
browser and is what the user clicks on
• The URL (Uniform Resource Locator) is the web
address that the browser jumps to when the user
clicks the link
­ usually specified as something like
http://www.site.com/folder/page.html
­ can be shortened if the page is on the same server as
the current page, or even shorter if it is in the same folder

2
2
Link examples

• Links in a list

2
3
A little about CSS

• The style of the page is determined by


Cascading Style Sheets (CSS) code
• Initially used for simple changes to things like
font and colour, CSS is now extremely powerful
and quite involved
­ you could spend a whole term learning CSS
• Originally CSS was closely linked with the
HTML code, but this is no longer recommended
­ instead good web design generally separates content
(HTML) from styling (CSS)

http://www.w3schools.com/html/html_css.asp 2
4
CSS location
• CSS code is often placed in an external file which
is then applied to all the pages on a website via a
<link> tag in each page
­ in fact all the course examples use a single CSS file (there
are duplicate copies of it in each week’s download)
• CSS code which is just intended for a single page
can be embedded in the <head> of that page
using a <style> element
• CSS code can also be used inline via a style
attribute in individual HTML elements
­ generally not recommended

2
5
CSS examples
(Example 01)
• External and embedded CSS code

embedded CSS

external CSS file styles.css (with uncommenting this will change


some settings commented out) the page style - demo 2
6
HTML forms

• Since this term is about JavaScript, up to


now all of our examples have been HTML
forms with a button that triggers the
JavaScript to react() in some way
­ this is a very common way to use JavaScript
• HTML forms can be very simple (e.g. a
single button) or quite complex (lots of
HTML elements)
• We will now review HTML forms
2
7
A basic form
• Example 02 is essentially a Hello World application
­ pops up an alert when the user presses the button
• It has a number of nested HTML elements
­ the <form> tag defines what is included in the form
­ the <fieldset> tag groups form elements together with a
border around them
­ the <div> (division) tag can be used to apply CSS styling
– in our examples the styles.css file applies a 10 pixel
margin around all <div> elements
­ the <input type="input type"> tag provides a way
for the user to interact – in this example the input type is
submit which generates a button on the page

2
8
The form

• The HTML code is

2
9
Including JavaScript

• Like CSS, JavaScript (JS) code can be


­ contained in an external file using a <link> tag
­ embedded in a page using a <script> element
­ included inline in individual HTML elements as an
attribute – not recommended!
• If you have written some JS that you want to use
on several pages it would be normal to put it in
an external file
• In the examples for this course the JS code is
embedded in each page (because every
example has different code)
3
0
JavaScript location

• In the past, external and embedded JS code


was often linked / included in the <head>
element
• However, it is a better idea (for performance
reasons) to place it at the bottom of the
<body> element
­ script compilation can slow down the page loading
­ the JS code can’t generally do anything until the
whole page has loaded so there’s no reason to put
it at the top

http://www.w3schools.com/js/js_whereto.asp 3
1
Connecting JS to HTML

• The most common way for JS to access the


HTML elements in the page is via
document.getElementById('elementId')
­ here elementId is declared in an HTML element
as an attribute
­ we have done this many, many times already in
COMP1753
• Each element id should be unique, so that
JS knows which element it is dealing with
­ NetBeans will give you a warning if you have
HTML elements with duplicate ids
3
2
Basic form (Example 02)
• JS gets theForm and then associates the react()
function with the onsubmit event
­ so the react() function is invoked (called) when the form is
submitted – i.e. the button is pressed

3
3
The Document Object
Model (DOM)
• In fact JS has access to the entire page (all the HTML
elements) via the Document Object Model (DOM)
• This is a model of the page created by the browser
when it loads the HTML code
• JS can change any of the elements in the HTML
document – e.g.
­ change content
­ change attributes
­ change CSS styles
­ add or remove HTML elements
• This obviously makes JS very powerful!

3
4
DOM manipulation
(Example 03)
• In the next example we will look at some simple DOM
manipulation
• The page just contains a form with a single button
­ it also has a <div> with no content (invisible initially)
• When the button is pressed JS adds a <p> paragraph
element to the <div> saying how many times it has
been pressed
• JS also changes the button (both the text and the font
size) each time it is pressed
• Finally JS changes the background colour of the page
and the form once the button has been pressed 4 times

3
5
DOM manipulation
(Example 03)
• The different page versions

3
6
The HTML code

• The HTML code just contains the <form>


with a button (the <input> element) and
then the empty <div>

3
7
Button press count

• In order to keep a record of how many


times the button has been pressed we just
need a global variable

• It is incremented when the button is


pressed
­ i.e. every time the react() function is invoked

3
8
Changing the button

• JS changes the button text & font size

3
9
Changing the <div>

• JS also changes the invisible <div>


• Note that to include HTML content in an
existing element you must use the
.innerHTML property (rather than
.value property as for the button text)

4
0
Changing the background
colour
• Finally to change the background colour

4
1
HTML form <input> types

• There are several input types for forms


­ each one is designed to capture different types
of user input
• The final example uses most of them
­ basic text fields
­ clickable inputs such as radio buttons,
dropdown lists & check boxes
­ specific text fields for numbers, emails, phone
numbers, URLs, dates, times, etc
­ others inputs such as sliders
4
2
Form elements
(Example 04)
text• Example 04 collects data
text from the user, then uses
radioit to generate a profile
number
text We will not look at the
•
emailcode in detail but it
tel shows what input types
url
are available
date
time
range
4
3
HTML form validation

• In the past JavaScript was often used to


check the validity of form input data, e.g.
­ does an email address include the @ symbol?
­ is a date formatted correctly?
• Now much of that can be done in HTML5 by
using the correct input type
• In addition you can use HTML5 to check that
a user has filled in a field by using the
required attribute
­ demo: First Name & Last Name
4
4
Summary

• Today we have had a brief introduction to HTML


­ tags & attributes
­ anatomy of a webpage
­ some basic HTML elements
• With a little about CSS
­ location & usage
• Plus more information about HTML forms
­ interaction with JavaScript
­ DOM manipulation
­ form input types

4
5

You might also like