Web Technology
HTML and CSS
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Web Browser
1989 Tim Berners-Lee invented www and HTML
• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to
read HTML documents and display them correctly.
• A browser does not display the HTML tags, but uses them to
determine how to display the document:
• The content inside the <body> section will be displayed in a browser.
The content inside the <title> element will be shown in the browser's
title bar or in the page's tab.
HTML Editors
• Notepad
• TextEdit (Mac)
• VS code
• Online editors
• You can use either .htm or .html as file extension. There is no
difference; it is up to you.
HTML Documents
• All HTML documents must start with a document type declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and ends with </html>.
• The visible part of the HTML document is between <body> and </body>.
• <!DOCTYPE html>
<html>
<body>
</body>
</html>
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
• It must only appear once, at the top of the page (before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
• <!DOCTYPE html>
HTML Elements
• The HTML element is everything from the start tag to the end tag:
• <tagname>Content goes here...</tagname>
• Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
HTML is Not Case Sensitive
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• Example
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• <!DOCTYPE html> declaration represents the document type, and helps browsers to
display web pages correctly. It must only appear once, at the top of the page (before any HTML
tags). Not case sensitive and For HTML5
• <html> element is the root element of an HTML page
<head> element contains meta information about the HTML page
<title>Page Title</title> specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
</head>
<body> element defines the document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
<h1>My First Heading</h1> element defines a large heading (h1 to h6)
<p>My first paragraph.</p> element defines a paragraph
</body>
</html>
The lang Attribute
• You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search
engines and browsers.
• <html lang="en">
• <html lang="en-US">
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• Example
• A table in HTML consists of table cells inside rows and columns.
• To add a border, use the CSS border property on table, th, and td
elements
<html>
<table>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table> </html>
• Set the width of the table to 100%:
• <table style="width:100%">
• <th style="width:70%">Firstname</th>
• HTML lists allow web developers to group a set of related items in
lists.
• HTML Table Padding
• Cell padding is the space between the cell edges and the cell content.
• By default the padding is set to 0.
• To add padding on table cells, use the CSS padding property:
• Example:
• th, td {
padding: 15px;
}
• To add padding only above the content, use the padding-top property.
• Add padding to the other sides with the padding-bottom, padding-left, and
padding-right properties:
• HTML Table - Cell Spacing
• Cell spacing is the space between each cell.
• By default the space is set to 2 pixels.
• To change the space between table cells, use the CSS border-spacing
property on the table element:
• Example:
table {
border-spacing: 30px;
}
colspan
• <table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
rowspan
• <table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
<!DOCTYPE html> List tag Ordered HTML List
<html>
<body> • HTML lists allow web An ordered list starts with the
<h2>An Unordered HTML List</h2> developers to group a set <ol> tag. Each list item starts
<ul> with the <li> tag.
<li>Coffee</li> of related items in lists.
<li>Tea</li> •
<li>Milk</li> The list items will be marked with
</ul> Unordered HTML List
numbers by default:
<h2>An Ordered HTML List</h2>
• An unordered list starts
<ol> Description lists.
<li>Coffee</li> with the <ul> tag. Each list
<li>Tea</li> item starts with the <li>
<li>Milk</li>
tag. A description list is a list of terms,
</ol> with a description of each term.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd> • The list items will be The <dl> tag defines the
<dt>Milk</dt>
<dd>- white cold drink</dd>
marked with bullets (small description list, the <dt> tag
black circles) by default: defines the term (name), and the
</dl>
</body>
<dd> tag describes each term:
</html>
Style properties
• The HTML style attribute is used to add styles to an element, such as color, font, size,
and more.
• <body style="background-color:powderblue;">
• Textcolor
• <h1 style="color:blue;">This is a heading</h1>
• Fonts
• <h1 style="font-family:verdana;">This is a heading</h1>
• Font size
• <p style="font-size:160%;">This is a paragraph.</p>
• Text Align
• <h1 style="text-align:center;">Centered Heading</h1>
Style properties
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
HTML Text Formatting
• <b> - Bold text
• <strong> - Important text (bold)
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Comments
• You can add comments to your HTML source by using the following
syntax:
• <!-- Write your comments here -->
• Example:
• <!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Colors
• Background Color
<h1 style="background-color:Blue;">Hello World</h1>
<p style="background-color:Red;">MSSU ...</p>
Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:Blue;">MSSU...</p>
Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
Colour values: rgb(255, 99, 71) #ff6347
• HTML Links: HTML links are defined with the <a> tag.
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into a little hand.
• A link does not have to be text. A link can be an image or any other HTML element!
• The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified URL address.
• Example: <a href="[Link] is a link</a>
The link's destination is specified in the href attribute.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• The href Attribute:
The <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to:
• Example
• <a href="[Link] MSSU</a>
HTML Links - The target Attribute
• By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
• Example:
• <a href="[Link] target="_blank">Visit W3Schools!</a>
• There are two ways to specify the URL in the src attribute:
• 1. Absolute URL - Links to an external image that is hosted on another
website. Example: src="[Link]
• 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".
HTML Images
• HTML images are defined with the <img> tag. The source file (src),
alternative text (alt), width, and height are provided as attributes:
• Example:
<img src="[Link]" alt="[Link]" width="104" height=
"142">
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• Syntax <img src="url" alt="alternatetext">
• The src Attribute
• The <img> tag is used to embed an image in an HTML page. The src
attribute specifies the path to the image to be displayed:
• Example
• <img src="img_girl.jpg">
• The alt Attribute
• The required alt attribute provides an alternate text for an image, if
the user for some reason cannot view it (because of slow connection,
an error in the src attribute, or if the user uses a screen reader).
• The value of the alt attribute should describe the image:
• Example
• <img src="img_chania.jpg" alt="Flowers in Chania">
• The width and height Attributes
• The <img> tag should also contain the width and height attributes,
which specify the width and height of the image (in pixels):
• Example
• <img src="img_girl.jpg" width="500" height="600">
Common Image Formats
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):
Abbreviation File Format File Extension
APNG Animated Portable Network .apng
Graphics
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert .jpg, .jpeg, .jfif, .pjpeg, .pjp
Group image
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
HTML Image Maps
• Image Maps
• The HTML <map> tag defines an image map. An image map is an
image with clickable areas. The areas are defined with one or more
<area> tags.
• Example
• Here is the HTML source code for the image map above:
• <img src="[Link]" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="[Link]">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="[Link]">
<area shape="circle" coords="337,300,44" alt="Coffee" href="[Link]">
</map>
HTML Background Images
• Background Image on an HTML element
• To add a background image on an HTML element, use the HTML style
attribute and the CSS background-image property:
• Example
• Add a background image on a <p> element:
• <p style="background-image: url('img_girl.jpg');">
HTML <picture> Element
• The HTML <picture> Element
• The HTML <picture> element gives web developers more flexibility in
specifying image resources.
• The <picture> element contains one or more <source> elements, each
referring to different images through the srcset attribute. This way the
browser can choose the image that best fits the current view and/or device.
• Each <source> element has a media attribute that defines when the image
is the most suitable.
div
• The <div> element is used as a container for other HTML elements.
• The <div> element is by default a block element, meaning that it takes
all available width, and comes with line breaks before and after.
• <div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
textarea
• <textarea id="w3review" name="w3review" rows="4" cols="50">
At [Link] you will learn how to make a website. They offer
free tutorials in all web development technologies.
</textarea>
HTML <frame> Tag
• The <frame> tag was used in HTML 4 to define one particular window
(frame) within a <frameset>.
• Use the <iframe> tag to embed another document within the current
HTML document:
• <iframe src="[Link]
• Semantic tags (header, nav, section, article, aside, footer, details,
summary, figure, caption)
• The <header> element represents a container for introductory
content or a set of navigational links.
• A <header> element typically contains: one or more heading
elements (<h1> - <h6>)
• The <nav> tag defines a set of navigation links.
• Browsers, such as screen readers for disabled users, can use this
element to determine whether to omit the initial rendering of this
content.
• The <section> tag defines a section in a document.
<style>
section {
display: block;
}
</style>
<section>
<h1>WWF</h1>
</section>
• The <article> tag specifies independent, self-contained content.
• An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.
• Potential sources for the <article> element: Forum post, Blog post,
News story
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the
world's most popular web browser today!</p>
</article>
<article>
<h2>YouTube</h2>
<p>Youtube is a channel</p>
</article>
• The <aside> tag defines some content aside from the content it is
placed in.
• The aside content should be indirectly related to the surrounding
content.
• Tip: The <aside> content is often placed as a sidebar in a document.
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</aside>
• The <details> tag specifies additional details that the user can open
and close on demand. The <details> tag is often used to create an
interactive widget that the user can open and close. By default, the
widget is closed. When open, it expands, and displays the content
within. Any sort of content can be put inside the <details> tag.
• The <summary> tag defines a visible heading for the <details>
element. The heading can be clicked to view/hide the details.
• Note: The <summary> element should be the first child element of
the <details> element.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
• The <caption> tag defines a table caption.
• The <caption> tag must be inserted immediately after the <table> tag.
<table>
<caption> <strong> Monthly savings </strong> </caption>
• The <footer> tag defines a footer for a document or section.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="[Link]
</footer>
Example of Image tag <img src="pic_trulli.jpg" alt="Italian Trulli">
• <!DOCTYPE html>
• <html>
• <body>
• <h2>HTML Image</h2>
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">
• </body>
• </html>
• The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.
• While the content of the <figure> element is related to the main flow,
its position is independent of the main flow, and if removed it should
not affect the flow of the document.
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
• Suggestion: Always Quote Attribute Values
• 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="[Link] our HTML
tutorial</a>
• Bad:
• <a href=[Link] our HTML
tutorial</a>
• Single or Double Quotes?
• 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'>
• Create a Bookmark in HTML
• Bookmarks can be useful if a web page is very long.
• To create a bookmark - first create the bookmark, then add a link to it.
• When the link is clicked, the page will scroll down or up to the
location with the bookmark.
• Example
• First, use the id attribute to create a bookmark:
• <h2 id="C4">Chapter 4</h2>
• <!DOCTYPE html>
• <html>
• <body>
•
<p><a href="#C4">Jump to Chapter 4</a></p>
• <h2 id="C4">Chapter 4</h2>
• <p>This chapter explains ba bla bla</p>
• <body>
• </html>
