WEB DEVELOPMENT:HTML, CSS AND JAVASCRIPT
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.
HTML SYNTAX
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1>
and <p>):
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 tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but W3C recommends
lowercase in HTML, and demands lowercase for stricter document types like
XHTML.
HTML Attributes
HTML attributes provide additional information about HTML elements.
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
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:
<img src="img_girl.jpg">
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):
<img src="img_girl.jpg" width="500" height="600">
HTML Headings
HTML headings are titles or subtitles that you want to display on a
webpage.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style
attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
Background Color
The CSS background-color property defines the background color
for an HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Text Color
The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an
HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML
element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment
for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Colors
HTML colors are specified with predefined color names, or with
RGB, HEX, HSL, RGBA, or HSLA values.
HTML STYLES - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid
out, what background images or background colors are to be used,
different displays for different devices and screen sizes, and much
more!
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS
file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML
element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to
blue, and the text color of the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.
The following example sets the text color of ALL the <h1> elements
(on that page) to blue, and the text color of ALL the <p> elements to
red. In addition, the page will be displayed with a "powderblue"
background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML
pages.
To use an external style sheet, add a link to it in the <head> section
of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file
must not contain any HTML code, and must be saved with a .css
extension.
Here is what the "styles.css" file looks like:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties.
You will learn more about them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML
element.
Tip: You can define a border for nearly all HTML elements.
p {
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the
text and the border.
HTML LINKS - HYPERLINKS
Links are found in nearly all web pages. Links allow users to click
their way from page to page.
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.
Note: A link does not have to be text. A link can be an image or any
other HTML element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
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.
<a href="https://www.google.com/">Visit Google!</a>
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
HTML Images
Images can improve the design and the appearance of a web page.
<img src="pic_trulli.jpg" alt="Italian Trulli">
HTML Images Syntax
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
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
When a web page loads, it is the browser, at that moment, that gets
the image from a web server and inserts it into the page. Therefore,
make sure that the image actually stays in the same spot in relation
to the web page, otherwise your visitors will get a broken link icon.
The broken link icon and the alt text are shown if the browser
cannot find the image.
<img src="img_chania.jpg" alt="Flowers in Chania">
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:
<img src="img_chania.jpg" alt="Flowers in Chania">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an
image.
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height
of the image in pixels.
Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles
sheets from changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder
If you have your images in a sub-folder, you must include the folder
name in the src attribute:
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Animated Images
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to
the left of a text:
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Common Image Formats
Here are the most common image file types, which are supported in
all browsers (Chrome, Edge, Firefox, Safari, Opera):
Abbreviatio File Format File Extension
n
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg
tables
