Grade 8 Week 1,2,3

Almanar language School
American Section
IT Department
Week 1-3 Grade 8
HTML Introduction
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.
A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
American Section
IT Department
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
 The <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.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
*********************************************************
What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>

<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

American Section
IT Department
Web Browsers
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:
American Section
IT Department
HTML Page Structure

Below is a visualization of an HTML page structure:
American Section
IT Department
Parts of a web site:
1. Website logo
The logo section of the website will commonly be the space for identifying the website brand.
While personal blogs and other non-brand-driven websites may only include the name of the
website here, this spot is the first point of call for establishing a brand on the website. This
image or text is often linked to the website main page, often known as “home”.
2. Header
The header is the top portion of the website, often containing the website logo as well as the
main menu. The header is often a permanent fixture of the website, where the main content
might scroll beneath it. The header contains information that is important to website
navigation.
3. Menu
Menus, often placed at an easy-to-reach place on the website, provide a way to navigate the
website in an easy way. A main menu is often contained in the header, or on a collapsible pane
(especially in mobile views of websites), and allows navigation through the pages of the website.
4. Body
The body area of a website is the area of the website that contains the most content. There are
a number of different kinds of content. Specific pages will contain specific content. The home
page depicted contains examples of these types of content in ways that would be displayed on
American Section
IT Department
a home page.
5. Highlighted content
Highlighted content, often exclusively on the home page, guides visitors to parts of your
website that will convert into website goals. Website goals are the actions, interactions, etc. on
your website that fulfil the very purpose of your website. Booking a flight on a travel agent’s
website, or buying goods on an online store are examples of this.
6. Call To Action (CTA)

CTAs are important for guiding visitors to your website to important information, completing
website goals, and navigating your website. CTAs can be obvious, such as buttons, or more
subtle, like linking within text, but all serve the same purpose: guiding visitors to information
that is relevant to them.
7. Sidebar
While many modern websites with flat design elements frame the body content within the full
width of the website, sidebars are very common website elements that haven’t disappeared
entirely. Sidebars, like menus, often help with navigation. When large amount of information,
like multiple blog posts, or products need to be ordered, a sidebar can help. Sidebars are often
used in displaying related bits of information, contain CTAs, or guide visitors to the next step
after they’ve read a post or added a product to their cart (for example).
8. Posts and “feed” content

A handy way to get visitors to your website engaging with the content on your website is by
offering a “feed” of content. This, like a slideshow of recommended products or, in this case, the
latest blog posts, serves to pique the visitor’s interest and guide them to completing website
goals (in the case of the dummy website, reading a blog post).
9. Internal Links
Internal links are useful for creating an ideal flow through your website. In the example, the link
takes users to the blog page, where they can peruse the full list of blog posts and find
something that interests them and effectively completing a website goal. Sidebar content and
highlighted content CTAs are another way of achieving the same thing, with an even more
effective attention grabbing effect.
10. Forms
Forms are ideal ways of gathering information from your visitors. Contact forms are very
common, and work to get the name and a means of contacting visitors at the very least. Sign-up
forms, application forms, shipping information forms, and the like are other examples of how
forms are used on websites. Forms are an easy and intuitive way for your visitors, from
whatever level of technological background, to get the correct information to you.
11. Buttons
As CTAs, prompts to complete an interaction like a form, or simply as a link to another part of
American Section
IT Department
your website (menus use this often) buttons are handy interactive parts of your website that
prompt engagement. Unique styling to these parts of the website can be helpful in brand
building, highlighting the CTA related, and guiding the visitor’s eye to a particular piece of
information.
12. Footer
The footer is the round-up of the website. Typically the footer will contain important links on
the website, or, sometimes, links to all of the pages of the website. A copyright and date stamp
is common, to protect the information on your website and let visitors know when your website
was last updated. Any other pertinent information – perhaps a mini contact form, a CTA, a
scrolling photo gallery, or any other permanent information you would like to display at the end
of every page – is contained in the footer.
13. Social links

Social media links are a popular addition to most websites. While the example show the links in
the footer, social media links can be displayed on any part of the website. If a visitor likes your
website, wants to get updates from your website via social media, or simply prefers getting in
contact via social media, these links will prompt further engagement with your website.
A social media presence is almost essential to creating and maintaining a brand online and is a
huge help with engaging with your online audience.
American Section
IT Department
CSS is the language we use to style a Web page.
What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files
 CSS Example
 body {
background-color: lightblue;
}
American Section
IT Department
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
CSS Solved a Big Problem

 HTML was NEVER intended to contain tags for formatting a web page!
 HTML was created to describe the content of a web page, like:
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every
single page, became a long and expensive process.
CSS Syntax
❮ PreviousNext ❯
A CSS rule consists of a selector and a declaration block.
CSS Syntax
The selector points to the HTML element you want to style.

American Section
IT Department
The declaration block contains one or more declarations separated by
semicolons.
Each declaration includes a CSS property name and a value, separated by a

colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
Example
In this example all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}
Example Explained
 p is a selector in CSS (it points to the HTML element you want to style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)
When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.
American Section
IT Department
Three Ways to Insert CSS

There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!
Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
An external style sheet can be written in any text editor, and must be saved
with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:

American Section
IT Department
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
American Section
IT Department
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Try it Yourself »
Tip: An inline style loses many of the advantages of a style sheet (by mixing
content with presentation). Use this method sparingly.
Multiple Style Sheets

If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
American Section
IT Department
Assume that an external style sheet has the following style for the <h1>
element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the
<h1> element:
h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet, the
<h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Try it Yourself »
Example
However, if the internal style is defined before the link to the external style
sheet, the <h1> elements will be "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try it Yourself »

Grade 8 Week 1,2,3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Grade 8 Week 1,2,3

Uploaded by

Copyright:

Available Formats

Almanar language School

Week 1-3 Grade 8

A Simple HTML Document

<h1>My First Heading</h1>

What is an HTML Element?

<tagname> Content goes here... </tagname>

<h1>My First Heading</h1>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

HTML Page Structure

6. Call To Action (CTA)

8. Posts and “feed” content

13. Social links

CSS is the language we use to style a Web page.

CSS Solved a Big Problem

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

Each declaration includes a CSS property name and a value, separated by a

 color is a property, and red is the property value

 text-align is a property, and center is the property value

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

Three Ways to Insert CSS

Here is how the "mystyle.css" file looks:

<h1 style="color:blue;text-align:center;">This is a heading</h1>

Multiple Style Sheets

You might also like