Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

Web Programming (2)

The document provides an overview of web programming, focusing on HTML, CSS, and JavaScript as the three pillars of web development. It covers essential HTML elements, structure, attributes, and formatting, as well as CSS for styling web pages. Additionally, it discusses methods for incorporating CSS into HTML documents and the importance of favicons and links in web design.

Uploaded by

yerabi25
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Web Programming (2)

The document provides an overview of web programming, focusing on HTML, CSS, and JavaScript as the three pillars of web development. It covers essential HTML elements, structure, attributes, and formatting, as well as CSS for styling web pages. Additionally, it discusses methods for incorporating CSS into HTML documents and the importance of favicons and links in web design.

Uploaded by

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

Web programming

Ermias T. & Zewdie H.


Martch 2023
Debre Tabor University
Required tools
• Sublime Text editor
• Web browser (Google Chrome is fine)
Three pillars of the web
• HTML
• CSS
• JavaScript
HTML and CSS
HTML (HyperText Markup Language)
• Hypertext simply means text that can jump from one
point to the other. If you have ever clicked a link on a
page (try this: google.com), you’ve used hypertext.
• Markup is simply a way to structure content so that we
can distinguish between different blocks of text.
• Language means a, umm, language. Computer
languages are similar to real world languages like
English and German, just very strict in their syntax.
• HTML lets us structure our page and the data in it. Once we
have a structure and data to work with, we can focus on style
and functionality.
Basic format
Basic format explained
• 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
<!DOCTYPE html> is the document
type declaration
• The DOCTYPE declaration is an instruction to the web browser about
what version of HTML the page is written in.
HTML Elements
• An HTML element is defined by a start tag, some
content, and an end tag:
<tagname> content goes here…</tagname>
• Examples

<h1> my first heading </h1>


<p> my first paragraph </p>
HTML page Structure
Structure
HTML version history
• Tim Berners-Lee invented www, html
• HTML ++
HTML 2.0, 3.2, 4.01, XHTML 1.0,…
• HTML5

NB. This lecture follows the HTML5 standard


HTML Headings, paragraphs
• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading. <h6> defines the least
important heading:
• HTML paragraphs are defined with <p> tag.
HTML Links, images
• HTML links are defined with <a> tag (anchor tag)
• <a href="https://www.google.com"> Google </a>

• The link's destination is specified in the href attribute.


• Attributes are used to provide additional information about HTML
elements.
• HTML images are defined with <img> tag

<img src=“dog.jpg" alt=“running dog


" width="104" height="142">
HTML Attributes
• HTML attributes provide additional information about HTML
elements.
• Attributes are instructions that clarify or modify an element. They go
after the element name, separated by a space.
• Most attributes take values, which follow an equals sign (=).
• Attributes usually come in name/value pairs like: name="value"
Attribute examples
• href
• src
• alt
• width, height, title, lang, style, etc.…
elements
• <b> Bold Face </b>
• <i> italics </i>
• <u> underline </u>
• <br> next line
• <hr> horizontal line/rule: indicates one topics has completed and
another one is beginning.
• <sub> subscript </sub>
• <sup> superscript </sup>
• <pre> preformatted text, as it was, intact </pre>
Semantic markup
• em
• blockquote
•q
• strong
• abbr
• cite
• address
• strike
Styles
• The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.

Syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Properties
• background-color
• color (text color)
• font-family ( like verdana etc.. )
• font-size ( text size like 300%)
• text-align (horizontal text alignment like center)
HTML text formatting
• <b> - Bold text (physical tag)
• <strong> - Important text (logical tag)
• <i> - Italic text
• <em> - Emphasized text (logical tag, italicized)
• <mark> - Marked text (highlighted)
• <small> - Smaller text (compare it with <big>)
• <del> - Deleted text (usually strukthrough)
• <ins> - Inserted text (usually underlined)
• <sub> - Subscript text
• <sup> - Superscript text
• <u>, <strike>
HTML Quotation and citation
elements.
• <blockquote> Defines a section that is quoted from another source
• <q> defines a short inline quotation.
• <abbr> defines an abbreviation or an acronym
<abbr title = “ longer form”>shorter form </abbr>
• <address> tag defines the contact information for the author/owner
of a document or an article (email address, phone number, URL, social
media handle, physical address, etc.).
• <cite> defines the title of a creative work (for work title) (eg. A book,
a poem, a song, a movie, a painting, a sculpture, etc.)
HTML Comments
• <!-- Write your comments here -->
• are notes in the HTML code that explain the important features of the
code.
HTML Colors
• HTML colors are specified with predefined color names (Orange,
gray, violet, blue, brown, green, gold, pink, cyan, purple, white,
yellow), or
with RGB(example: blue is rgb(0,0,255)), pink is rgb(255,192,203)),
HEX (#0000FF for blue, #FFC0CB for pink) ,
HSL(hue-a degree on the color wheel from 0 to 360. 0 is red, 120 is
green etc., saturation (0% means a shade of gray, 100% is the full
color), lightness (0% is black, and 100% is white): Example:
hsl(0,100%,50%) ),
RGBA, or HSLA values (a is alpha which is opacity – level of
transparent. 0.0 is fully transparent and 1.0 is not transparent at all
(hsla (0, 100%, 50%, 0.5)
HTML Lists
• To specify lists of information and each item starts with <li> tag
• 3 types:
• Ordered List <ol> or numbered list
• Unordered List <ul> or bulleted list
• Description List <dl> or definition list
• Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Lists – un-numbered
• Unnumbered Lists
Lists:with different pointer types:
<UL>type="square">
<UL
<LI> oranges
apples </LI>
</LI>
<LI> peaches
bananas </LI>
<LI> grapes
grapefruit
</LI>
</LI>
</UL>

type="square"
type="disc"
type="circle"
Lists - numbered
• Numbered
Unnumbered
Lists:
Lists:
<OL>
<UL>
<LI> oranges
apples </LI>
</LI>
<LI> peaches
bananas </LI>
<LI> grapes
grapefruit
</LI>
</LI>
</UL>
</OL>
Lists - numbered
• Numbered Lists with
that starts
different
withordering:
4:
<OL type="a">
start="4">
<LI> oranges </LI>
<LI> peaches </LI>
<LI> grapes </LI>
</OL>

type="a": a, b, c
type="A": A, B, C
type="i": i, ii, iii
type="I": I, II, III
Description list <dl>
• The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Lists

TIPS
Use the start and type attributes to customize your lists.
It is possible to make lists of lists, which is helpful for
creating some items, such as outlines.
MARQUEE TAG
• This tag is used text horizontally across the screen.it is mainly used to
deliver a specfic message to the visitor or to scroll Ads on a page.
• Example: <marquee> hello world></marquee>
Attributes of marquee tag

• Bgcolor : Sets the background color of the marquee.


• Direction :Sets the direction of the marquee box to either left-to-
right, right-to-left, up-to-down and down-to-up.
• Width: This sets how wide the marquee should be.
• Loop: This sets how many times the marquee should 'Loop' its text.
Each trip counts as one loop.
Using Line Break Tag: <BR>
• The empty tag <BR> is used, where the text needs to start from a new
line and not continue on the same line. To get every sentence on a
new line, it is necessary to use a line break.
• Example:
<BODY>Debre Tabor University<BR>
Faculty of Technology </BODY>
• Output:
Debre Tabor University
Faculty of Technology
Using Horizontal Rule Tag: <HR>
• An empty tag <HR> basically used to draw lines and horizontal rules. It can
be used to separate two sections of text.
• Example:
<BODY>
Your horizontal rule goes here. <HR>
The rest of the text goes here.
</BODY>
• Output:
Your horizontal rule goes here.

The rest of the text goes her


<HR> accepts following attributes
• SIZE: Determines the thickness of the horizontal rule. The value is given as a pixel value.
Example: <HR SIZE="3">
• WIDTH: Specifies an exact width of HR in pixels, or arelative width as percentage of the document width.
Example: <HR WIDTH="50%">, horizontal rule a width a 50 percent of the page width.
• ALIGN: Set the alignment of the rule to LEFT, RIGHT and CENTER. It is applicable if it is not equal to
width of the page.
• NOSHADE: If a solid bar is required, this attribute is used; it specifies that the horizontal rule should not
be shaded at all.
• COLOR: Set the color of the Horizontal rule.
Example: <HR COLOR="BLUE“>
Example of <HR> with its attribute:
<HR ALIGN=' 'CENTER' ' WIDTH=' '50%' ' SIZE=' '3" NOSHADE
COLOR="BLUE“>
HTML Links
• Links allow users to click their way from page to page
• <a href="url">link text/image/html element</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
• target attribute of links specifies where to open the linked document
• _self is default : in the same window /tab
• _blank is new window/tab
• title attribute of links specifies extra information about an element (tooltip
text when the mouse moves over the element)
• <a href="https://www.google.com/" title="Go to
the google search bar“ target = “_blank”>Visit
Google</a>

• Use mailto: inside the href attribute to create


a link that opens the user’s email program
(link to an email address)
<a href="mailto:someone@example.com">Send
email</a>
HTML Favicon

• A favicon (favorite icon) is a tiny icon included along with a website, which is
displayed in places like the browser's address bar, page tabs and bookmarks
menu.
• A favicon image is displayed to the left of the page title in the browser tab, like
this:

• Known as tab icon, website icon, bookmark icon or url icon.


• Usually, a favicon is 16 x 16 pixels in size and stored in the GIF, PNG, or ICO file
format.
Cont’d
• Note, however, that most modern browsers replaced the favicon from
the address bar by an image indicating whether or not the website is
using HTTPS.
Use link to insert a favicon
• <head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon"
href="/images/favicon.ico">
</head>

• Syntax
• <link rel = “icon” type = “image/icon type” href =
“image path”>
HTML CSS
• 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
CSS contd.
• CSS is a stylesheet language used to describe the
presentation of a document written in HTML
• CSS describes how HTML elements should be displayed.
• CSS is the code that styles web content.
• Like HTML, CSS is not a programming language. It's not
a markup language either. CSS is a style sheet
language.
Ways to insert CSS
• 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
CSS Syntax
Example: p as a selector to style
<p>
p {
color: red;
text-align: center;
}

In this example all <p> elements will be center-aligned, with a red text
color:
Inline CSS
• Used to apply a unique style to a single HTML element.
• 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 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.
<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>
Example: set the text color of ALL the <h1> elements (on that
page) to maroon. In addition, the page will be displayed with a
“linen" background color:
• <head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
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.

• 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.
Example: style.css
• body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

then you can reference style.css in your html like:


<head>
<link rel="stylesheet" href="styles.css">
</head>
Commonly used CSS properties
• Color (red, blue, etc..)
• Font-family (verdana, arial, sans-serif)
• Font-size (300%)
• Border (1px solid red;)
• Padding (2px)
• Margin (50px

p {
border: 2px solid powderblue;
margin: 50px;
}
CSS comments
• CSS comments are generally written to explain your code. It is very
helpful for the users who reads your code so that they can easily
understand the code.
• Comments are ignored by browsers.
• Comments are single or multiple lines statement and written
within /*............*/ .
CSS Colors (rgb, rgba, hex,
• rgb(red, green, blue)
• Example: <h2 style="background-color:rgb(255, 0, 0);">rgb
values example</h2>
• rgba(red, green, blue, alpha)
• Example: <h2 style="background-color:rgba(255, 99, 71,
0.8);">Alpha transparent from 0 to 1 example</h2>
• #rrggbb
• Example: <h2 style="background-color:#3cb371;">Hex Values
of color example</h2>
• hsl(hue, saturation, lightness)
• Example: <h2 style="background-color:hsl(0, 100%,
50%);">Hue Saturatioin and Lightness example</h2>
HTML Table
• To arrange data into rows and columns (tabular form)
• <table> <tr><td><th> elements are used
• <table> defines a table
• <tr> defines a table row
• <td> defines a cell in a table
• <th> defines a header cell in a table
• <caption> defines a table caption
• <colgroup> specifies a group of one or more columns in a table for formatting
• <col> specifies column properties for each column within a <colgroup> element
• <thead> groups the header content in a table
• <tbody> groups the body content in a table
• <tfoot> groups the footer content in a table.
Example:
• <table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Vodaphone</td>
<td>Nick Read</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>Ethio Tel</td>
<td>Frehiwot Tamiru</td>
<td>Ethiopia</td>
</tr>
</table>
Table border
• To add a border, use the CSS border property on table, th, and td elements:

table, th, td {
border: 1px solid black;
}
To avoid double borders around table and cells:
border-collapse: collapse
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Styling table borders, header and
cells
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
To get round cornered borders:
border-radius: 10px;
To change the appearance of the border:
border-style: dotted;

th, td {
border-style: dashed;
border-color: #96D4D4;
}
Table Sizes: use width, height
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

To align text inside the table (th or td)


th {
text-align: left;
}
Table caption
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Note: The <caption> tag should be inserted immediately after the <table> tag.
Table styling quick tips
• Make your table markup as simple as possible, and keep things
flexible, e.g. by using percentages, so the design is more responsive.
• Use table-layout: fixed to create a more predictable table layout that
allows you to easily set column widths by setting width on their
headings (<th>).
• Use border-collapse: collapse to make table elements borders collapse
into each other, producing a neater and easier to control look.
• Use <thead>, <tbody>, and <tfoot> to break up your table into
logical chunks and provide extra places to apply CSS to, so it is easier to
layer styles on top of one another if required.
• Use zebra striping to make alternative rows easier to read.
• Use text-align to line up your <th> and <td> text, to make things
neater and easier to follow.
<div> element: content division
element
• Often used as a container for other HTML elements.
• The <div> element has no required attributes, but style, class and id
are common.
• When used together with CSS, the <div> element can be used to style
blocks of content.
• Any sort of content can be put inside the <div> tag!
• The <div> tag defines a division or a section in an HTML document.
Example:
<body>
<div style="background-
color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is
the most populous city in the United Kingdom, with
a metropolitan area of over 13 million
inhabitants.</p>
</div>
</body>

What if you style the body only? Check it out.


<body>
<div style=“border: 1px solid pink; padding:
20px; font-size: 20px;">
<p>Africans were gathering in Addis Ababa this
week</p>
<p>London is the capital city of England. It is
the most populous city in the United Kingdom,
with a metropolitan area of over 13 million
inhabitants.</p>
</div>
</body>
Padding property
• Sets the padding area on all four sides of an element at once.
• An element’s padding area is the space between its content and its border.
• Constituent properties
• padding-bottom
• padding-left
• padding-right
• padding-top
• The padding property may be specified using one, two, three, or four
values. Each value is a <length> or a <percentage>.
Padding contd.
• When one value is specified, it applies the same padding to all four
sides
• When two values are specified, the first padding applies to the top
and bottom (hence vertical), the second to the left and right (hence
horizontal).
• When three values are specified, the first padding applies to the top,
the second to the right and left, the third to the bottom.
• When four values are specified, the paddings apply to the top, right,
bottom, and left in that order (clockwise).
Padding contd.
• Values
• <length> --the size of the padding as a fixed value
• <percentage> the size of the padding as a percentage, relative to the width of
the containing block
• Examples
padding: 20px 50px;
• padding: 10px 3% 20px; /* top: 10px padding, left and right: 3%
padding, bottom: 20px padding */
Margin property
• Sets the margin area on all four sides of an element at once.
• Margins create extra space around an element, unlike padding, which
creates extra space within an element.
• Constituent properties
• margin-bottom
• margin-left
• margin-right
• margin-top
• The margin property may be specified using one, two, three, or four
values. Each value is a <length> or a <percentage> or the keyword auto.
Margin contd.
• When one value is specified, it applies the same margin to all four
sides
• When two values are specified, the first margin applies to the top and
bottom (hence vertical), the second to the left and right (hence
horizontal).
• When three values are specified, the first margin applies to the top,
the second to the right and left, the third to the bottom.
• When four values are specified, the margins apply to the top, right,
bottom, and left in that order (clockwise).
margin contd.
• Values
• <length> --the size of the margin as a fixed value
• <percentage> the size of the margin as a percentage, relative to the width of the
containing block
• Auto – the browser selects a suitable margin to use. You can set the margin
property to auto to horizontally center the element within its container.
• Examples
margin: 20px ; /* all sides 10px margin */
• margin: 10px 3% -1em; /* top: 10px margin, left and right: 3% margin,
bottom: -1em margin */
• Margin: 1.6em 20px; /* top and bottom: 1.6em margin */
CSS Units
• % - set font-size relative to the current font-size
• em (element) – set the relative size, relative to the font-size of the
element.
• 2em means 2 times the size of the current font
• rem (root element)-relative to the browser base font-size
• px – is an absolute unit (not scalable)
• pt
Note: px don’t scale but em and rem scales, when the user zooms in.
em and rem are relative units.
em and rem
• em:
unit = font size of the element being styled * specified value of the element being
styled
Example:
html {
font-size: 18px;
}
section {
font-size: 14px;
padding: 3em; /* meaning 3 times 14px which equals 42)
}
em and rem
• rem:
unit = font size of the root element * specified value of the element
being styled
Example:
html {
font-size: 18px;
margin: 2rem; /* means 2 times 18px, which equals 36px */
}
Effect of inheritance on em unit
• em:
Unit = font size of the element being styled * font size of the parent
and grandparent elements (if any) * specified value of the element
being styled.
• With em, the child element inherits the value of its parent and up to
the grandparent
Effect of inheritance eon em unit
html {
<section class =“page-wrapper”>
Grandparent
<div class = “container”>
parent
<div class = “container”>
child
</div>
</div>
</section>
</html>
html {
font-size: 16px;
}
.page-wrapper {
font-size: 1.5em; /* meaning 1.5 times 16 px by inheritance */
}
.container {
padding: 2em; /* meaning 2 * 1.5 * 16px by inheritance */
html {
font-size: 16px;
}
.page-wrapper {
font-size: 1.5em; /* meaning 1.5 times 16 pxby inheritance */
}
.container {
font-size: 1.5em; /*meaning 2 * 1.5 * 16px by inheritance */
padding: 2em; /* meaning 1.5 * 2 * 1.5 * 16px by inheritance */
CSS Box Model
• All HTML elements can be considered as boxes.
• Consists of margins, paddings, borders, and the actual content.
• Parts of the box
• Content  the content of the box, where text and images appear
• Padding  clears an area around the content. The padding is transparent
• Border  it goes around the padding and the content
• Margin  clears an area outside the border. It’s transparent.
The CSS Box Model
• Content area has dimensions (width and height)
• Padding area
Standard box model
Width and height (standard box
model)
Alternative box model
.box { box-sizing: border-box; }

• By default, browsers use the standard box model. If you want to turn
on the alternative model for an element, you do so by setting box-
sizing: border-box on it. By doing this, you are telling the browser to
use the border box, as shown above, as your defined area.
box {
box-sizing: border-box;
}
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
<div>
Lorem ipsum...
</div>
Width and height of an element
• When you set the width and height properties of an element with
CSs, you just set the width and heigh of the content area.
• To calculate the full size of an element, you must add padding,
borders and margins.

• Total width of an element = width + left padding + right padding + left


border + right border + left margin + right margin
• Total height of an element = height + top padding + bottom padding +
top border + bottom border + top margin + bottom margin
This <div> element will have a total
width of 350px
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

The actual space taken up by the box will be


350px wide.
HTML Block and Inline elements
• A block-level element always starts on a new line.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• A block level element has a top and a bottom margin, whereas an
inline element does not.

• Example: The <div> element is a block-level element.


Block-level elements example
• <address>
• <blockquote>
• <dd>
• <div>
• <dl>
• <dt>
• <h1>-<h6>
• <hr>
• <li>
• <main>
• <ol>
• <p>
• <pre>
• <table>
• <ul>
Inline elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as
necessary.
• Example: <span>

<p>
This is an inline span <span style="border: 1px solid
black">Hello World</span> element inside a paragraph.
</p>
Inline elements example
• <a><abbr><acronym><b>
• <big>
• <br>
• <cite>
• <em><i>
• <img>
• <q><small>
• <span>
• <strong>
• <sub><sup>
The <span> element
• An inline container used to mark up a part of a text, or a part of a
document.
• The <span> element has no required attributes, but style, class and id
are common.
• When used together with CSS, the <span> element can be used to
style parts of the text:
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
This tag should be used to wrap any
specific word that you want to highlight in
your webpage.
<p>
My mother
has <span style="color:blue">blue</span> eyes.
</p>
• <body>
• <h2>Span Example</h2>
• <p><span style="background-color:lightgreen">
GeeksforGeeks</span> is A Computer Science Portal where
you can<span style="color:blue;"> Publish</span> your own <span
style="background-color:lightblue;">articles</span> and share your
knowledge with the world!!
• </p>
• </body>
HTML Class & ID
• The HTML class attribute is used to specify a class for an HTML
element.
• Multiple HTML elements can share the same class.
dot className
<p class = “para1”> paragraph 1 to be styled .</p>
<p class = “para2”>paragraph 2 is to be styled .</p>

Now how do we style the two paragraphs differently in


an internal/external stylesheet?
.para1 {
border: 1px solid white;
}
.para2 {
border: 1px solid red;
}
Different elements with the same
class
<h1 class = “city”> Addis.</h1>
<h2 class = “city”>Bahir Dar.</h2>
<h3 class = “city”>Hawassa.</h3>
<h4 class = “city”>Ziway</h4>

<!--internal CSS -->


.city{
background-color: black;
color: lightgreen;
font-family: cursive;
}
The Syntax for Class
• To create a class; write a period (.) character, followed
by a class name. Then, define the CSS properties within
curly braces {}
HTML id attribute
• The HTML id attribute is used to specify a unique id for an HTML
element.
• You cannot have more than one element with the same id in an HTML
document.
• The value of the id attribute must be unique within the HTML
document.
• The syntax for id is: write a hash character (#), followed
by an id name. Then, define the CSS properties within
curly braces {}.
<h1 id="myHeader">My Header</h1>

<-- internal CSS inside style tag -->


#myHeader {
color: black;
}

Syntax is the same as the way class works.


syntax
<tag id="id_name">

In CSS Stylesheet:
#id_name {
// CSS Property
}
CSS Selectors
• A CSS selector selects/finds the HTML element(s) you want to style.
• Basic CSS selectors:
• Element selector (element)
• Id selector (#id)
• Class selector (.class)
• Universal selector (*)
• Grouping selector
CSS element selector
• The element selector selects HTML elements based on the element
name.
p {
text-align: center;
color: red;
}
Here, all <p> elements on the page will be center-aligned, with a red
text color
CSS id selector
• The id selector uses the id attribute of an HTML element to select a specific
element.
• The id of an element is unique within a page, so the id selector is used to
select one unique element!
• To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
#para1 {
text-align: center;
color: red;
}
The CSS rule above will be applied to the HTML
element with id="para1"
CSS class selector
.city {
text-align: center;
color: red;
}
//for specific HTML element
p.city {
text-align: center;
color: red;
}
For more than one class
<head>
<style>
p.para1 { text-align: center; color: red; }
p.para2 { font-size: 300%; }
</style>
</head>
<body>
<p class=“para1">This paragraph will be red and center-
aligned.</p>
<p class=“para1 para2">This paragraph will be red,
center-aligned, and in a large font-size.</p>
</body>
CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}

• The CSS rule above will affect every HTML element on the page
The CSS grouping Selector
h1, h2, p {
text-align: center;
color: red;
}

Same as:
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
HTML Head element
• The HTML <head> element is a container for the following elements:
<title>, <style>, <meta>, <link>, <script>, and <base>.
• <title> ---title of the document, shown in the title bar or page tab
• <style> --to define style information
• <link> -- to link external documents (like external style sheets)
• <meta> --to specify character set, page description, keywords, author of
the document, and viewport settings
• <script> -- for JavaScript (client side script)
• <base> --specifies the base URL and/or the target for all relative URLs in
a page (i.e., default URL and/or target for pages)
<meta> tag common attributes
• charset  specifies the character encoding for the HTML document
• name  specifies name for the metadata (e.g., author, keywords,
description, application-name…)
• content  specifies the values associated with name
<meta>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web
tutorials">
<meta name="keywords" content="HTML, CSS,
JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
</head>
<meta charset="utf-8">
• This element specifies the document's character encoding — the
character set that the document is permitted to use. utf-8 is a
universal character set that includes pretty much any character from
any human language. This means that your web page will be able to
handle displaying any language; it's therefore a good idea to set this
on every web page you create! For example, your page could handle
English and Amharic just fine
HTML Layout Elements
• Header
• Footer
• Section
• Article
• Aside
• Nav
• Details
• summary
HTML <article> <header> tag
• 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
• A news paper article
• A user-submitted comment
<header> <aside>
• <aside> tag defines some content aside from the content it’s placed
in.
• The content should be indirectly related to the surrounding content
• Content in aside is a stand-alone, non-essential part of the web page,
and if you delete it, the main content will not be affected.
• Endnotes, comments, lists of terms, reference information, a
collection of links, pull-quotes, etc. are examples of information that
can be within the <aside> element.
<body>
<p>I have watched Game of Thrones last year.</p>
<aside style = “float: right; width: 30%; padding-left: 15px;>
<p> Game of Thrones is, by the way, an American fantasy drama
television series created by David, adapted from A Song of Ice and Fire
fantasy novels. </p>
</aside>
</body>
<header>
• Defines a header for a document or a section.
• Represents a container for introductory content or a set of
navigational links
• A <header> element typically contains:
• One or more heading elements (h1 –h6)
• Logo or icon
• Authorship info
HTML Semantic Elements
• Semantic elements = elements with a meaning
• A semantic element clearly describes its meaning to both the browser
and the developer
• Examples:
non-semantic: <div>, <span> -- tells nothing about its content
Semantic: <section>, <table>, <article>, <aside>, <nav>, <header>,
<time>, <footer>, <main>, <summary>, <form>, etc.
HTML <section> element
• Defines a section in a document
• A section is a thematic grouping of content, typically with a heading
• Examples of where a <section> element can be used:
• Chapters
• Introduction
• News items
• Contact information
Try this one
<h1> Homepage </h1>
<section>
<h2>About Us</h2>
<p>Befo Sew Foundation is established by Daniel Kibret to honor, recognize and
award kind and benevolent persons in Ethiopia.
</p>
</section>
<section>
<h1> contact us </h1>
<address>
Email: someone@gmail.com <br>
Location: Debre Markos
</address>
</section>
Two sections in a document
example
<section>
<h1>Bego Sew Foundation </h1>
<p>Befo Sew Foundation is established by Daniel Kibret to honor,
recognize and award kind and benevolent persons in Ethiopia.
</p>
</section>
<section>
<h1> ESS </h1>
<p> ESS is an Ethiopian space science society established in 2004, with 47 founding
members.
</P>
</section>
How to use section in HTML
• Wrap the related elements you want to group together in section
tags. Most sections should contain a heading
Nesting <article> in <section> and
vice versa
• You will find HTML pages with <section> elements containing
<article> elements, and <article> elements containing <section>
elements.
HTML <footer> element
• Defines a footer for a document or section
• A <footer> element typically contains:
• Authorship info
• Copyright info
• Contact info
• Sitemap
• Back to top links
• Related docs
NB. You can have several <footer> elements in one document
Tip: Contact info inside <footer> should go inside an <address> tag
HTML <nav> element
• Defines a set of navigational links (menus, tables of contents, indexes,
etc.)
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">jQuery</a>
</nav>\

Output:
HTML | CSS | JavaScript | jQuery
HTML <figure> and <figcaption>
elements
• The <figure> tag specifies self-contained content like illustrations,
diagrams, phots, code listings, tables, charts, etc.
• The <figcaption> tag defines a caption for a <figure> element.
• The <img> element defines the actual image/illustration.

<figure>
<img src=“MLK.jpg" style="width:100%">
<figcaption>Fig.1 – Martin
Luther</figcaption>
</figure>
<figure> tag
• figure tag contains mostly two tags:
• img src
• figcaption
HTML Layout Techniques
Layout contd.
• Four different techniques to create multicolumn layouts
• CSS Framework
• CSS float property
• CSS flexbox
• CSS grid
CSS Frameworks (read about them)
• Comprises several CSS stylesheets ready for use by web developers
and designers
• Examples
• Bootstrap (an initiative by Twitter)
• Foundation
• Bulma
CSS float Layout
• Use the float and clear properties
• The CSS float property specifies how an element should float
• The CSs clear property specifies what elements can float beside the
cleared element and on which side
• float: left/right/none/inherit (values)
float property values
• left/right  the element floats to the left/right of its container
• none  the element does not float (will be displayed just where it
occurs in the next). This is default
• inherit  the element inherits the float value of its parent.

In its simplest use, the float property can be used to wrap text around
images.
example
<p>
Hello In the Other side.
</p>
<img src="MLK.jpg" alt="" width="20%"
height="50%“ style = “float: right”>

Or use <style> </style>


Clear and clearfix
• When we use the float property, and we want the next element
below (not on right or left), we will have to use the clear property.
• The clear property specifies what should happen with the element
that is next to a floating element.
• Values
• none
• left/right
• both
• inherit
Clear property values
• none default, the element is not pushed below left/right floated
elements
• left/right the element is pushed below left/right floated element
• both  the element is pushed below both left & right floated
elements
• inherit the element inherits the clear value from its parent.
clear example
div1 {
float: left;
}

div2 {
clear: left;
}
This example clears the float to the left. Here, it means
that the <div2> element is pushed below the left floated
<div1> element:
Clear:both
Try this one
<div style="border: 2px solid red; overflow: auto;" >
<img src="MLK.jpg" alt="" width="100"
height="100" style="float: right;">
• <p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quis dolorem cum totam, magni odio
autem blanditiis, beatae molestias ipsa aliquam
nihil? Architecto, itaque consectetur ducimus natus
cumque odit reprehenderit doloremque.
</p>
</div>
CSS Text
• color
• background-color
• text-align (to set the horizontal alignment of text)
• Left/right/center/justify
• Justify  each line is stretched so that every line has equal width and the left and right margins are
straight
• Direction rtl or ltr or inherit
• Unicode-bidi  embed, normal,bidi-override
• Text-decoratioin overline, line-through, underline
• Text-transform uppercase, lowercase, capitalize
• Letter-spacing space between characters in a text (eg. 3px)
• Word-spacing:10px
Video and Audio in HTML
<video src=“tilahun.mp4" width="320" height="240
" controls>
Your browser does not support the video tag.
</video>
Use Multiple Source formats to
improve compatibility
<video width="320" height="240" controls>
<source src=“tilahun.mp4" type="video/mp4">
<source src=“teddy.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The <source> element allows you to specify alternative
video files which the browser may choose from. The
browser will use the first recognized format.
• Fallback content: The text between the <video> and </video> tags
will only be displayed in browsers that do not support the <video>
element
• Controls/autoplay/muted
• Controlsadds video controls, like play, pause and volume
• Autoplay to start a video automatically
• Autoplay muted  to start automatically but no sound
Audio
<audio controls>
<source src=“Tsedi.ogg" type="audio/ogg">
<source src=“Zeritu.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Automatically but no sound
• <audio controls autoplay muted>
<source src=“teddy.ogg" type="audio/ogg">
<source src=“tilahun.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
</audio>
CSS Combinator
CSS Combinators
• Four different combinators in CSS
• Descendant selector (space)
• Child selector (>)
• Adjacent sibling selector (+)
• General sibling selector (~)
Descendant Selector
• The descendant selector is a way to select elements that are located
somewhere underneath other elements, according to the tree
structure of the webpage.
• This selector is actually multiple selectors combined together, but
separated by a space.
• The first selector is the "ancestor", the element(s) that must be
located higher in the tree, and the second selector is the
"descendant", the element(s) that must be located somewhere
underneath the ancestor in the tree.
Descendant selector (space)
div p {
background-color: yellow;
}

selects all <p> elements inside <div> elements


example
<li>
li li {
<div>Item 1</div>
color: red;
<ul>
}
<li>Subitem A</li>
<li>Subitem B</li>
This will affect the subitems only.
</ul>
</li>
ul li{ }
header h2 { }
.module div { }
#id_one span { }
div dl dt a { }

Take ul li { } for example. It means “any list


item that is a descendant of an unordered list.”
Child selector (>)
(aka Direct Descendant Selector)
div > p {
background-color: yellow;
}
selects all <p> elements that are children of a <div>
element
select elements that are direct descendants only
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<section><p>Paragraph Three</p></section>
</div>

Here Paragraph Three is the child of section, not div.


div > p {
background-color: yellow;
}
This code doesn’t set paragraph Three into yellow.
TIP:Had it been with descendant selector, all p’s will
be set to yellow.
ul li {color: red; }
ul > li {color: red;}

The first selector above is a descendant selector. It will select any list
items that are anywhere underneath an unordered list in the markup
structure. The list item could be buried three levels deep within other
nested lists, and this selector will still match it.

The second selector above is a child combinator selector. This means it


will only select list items that are direct children of an unordered list. In
other words, it only looks one level down the markup structure, no
deeper. So if there was another unordered list nested deeper, the list
item children of it will not be targeted by this selector.
Example
Adjacent Sibling Selector (+)
• The adjacent sibling selector is used to select an element that is
directly after another specific element.
• Sibling elements must have the same parent element, and "adjacent"
means "immediately following".
div + p {
background-color: yellow;
}
selects the first <p> element that are placed
immediately after <div> elements
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<section><p>Paragraph Three</p></section>
</div>
<p>Paragraph Four</p>
<p>Paragraph Five</p>

Here Paragraph Four is the adjacent sibling that is placed immediately


after div elements
div + p {
background-color: yellow;
}
This code sets paragraph Four into yellow. Even
the div elements are not set to yellow.
General sibling Selector (~)
div ~ p {
background-color: yellow;
}
selects all <p> elements that are siblings of <div>
elements
p ~ ul {
background: #ff0000;
}
Set a background color for all <ul> elements that are preceded by a <p>
element with the same parent
Try: div p | div + p | div > p | div ~ p
text-decoration:line-through
Class Work
<body>
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<section><p>Paragraph Three</p></section>
</div>
<p>Paragraph Four</p>
<p>Paragraph Five</p>
<section><p>Paragraph Five</p> </section>
<footer>
<p>Paragraph Six</p>
</section>
<p>Paragraph Seven</p>
</body>
HTML Entities
• Reserved characters in HTML

&entity_name; OR
&#entity_number;

An HTML entity is a piece of text ("string") that begins with an ampersand


(&) and ends with a semicolon (;) .
Entities are frequently used to display reserved characters (which would
otherwise be interpreted as HTML code), and invisible characters (like
non-breaking spaces).
Examples
&nbsp;  non-breaking space (a space that will not break into a new
lien.
&lt; less than
&amp; ampersand (& itself)
&copy;  copyright symbol ©
&euro; &pound; &reg; (here reg is for ® registered trademark
HTML Forms
• To collect user input
<form>
.
form elements
.
</form>
The <form> element is a container for different types of
input elements, such as: text fields, checkboxes, radio
buttons, submit buttons, etc.
HTML Form Elements
• <input>
• <label>
• <textarea>
• <button>
• <select>
• <legend>
• <output> etc…
<input> element
• An <input> element can be displayed in many ways, depending on the
type attribute

<input type = “text”> displays a single-line text input field


<input type = “radio”> displays a radio button (for selecting one of
many choices
<input type = “button”> displays a clickable button
<input type = “submit”> displays a submit button (for submitting the
form)
<label>
• Defines a label for many form elements
• Represents a caption for an item in a user interface
• To associate the <label> with an <input> element, you need to give
the <input> and id attribute. The <label> then needs a for attribute
whose value is the same as the input’s id.
• Can be used in two ways:
• Use <label> tag by providing the <input> id attribute. The <label> tag needs a
for attribute whose value is the same as the input id.
• <input> tag used directly inside the <label> tag. In this case no need of id and
for as their association is implicit
Two ways of using label tag
<label for="first-name">Name:
<input type="text" value="your name here..">
</label>
// the same as

<label for="first-name">Name:</label>
<input type="text" id="first-name" name="first-
name" value="your name here..">
Text fields <text>
<form>
<label for="fname">First Name: </label>
<input type="text" id="fname“> <br><br>
<input type="submit" value="submit">
</form>
The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them
together.
Radio Buttons (<radio>)
<form>
<input type="radio" name="gender" id="male" value="Male">
<label for="male">Male</label>

<input type="radio" name="gender" id="female"


value="Female">
<label for="female">Female</label>

<input type="radio" id="other" name="other" value="Other">


<label for="other">Other</label>
</form>
HTML Input Types
• text (default value)
• submit/password/button/date/time/number/email/checkbox/radio/
range/reset
• <input type="password"> defines a password field
Checkboxes <checkbox>
<h1>Language You Speak Fluently</h1>
<form>
<input type="checkbox" name="language" id="am">
<label for="am">AMHARIC</label> <br>

<input type="checkbox" name="language" id="or">


<label for="or">Oromiffa</label> <br>

<input type="checkbox" id="fr" name="language">


<label for="fr">French</label>
</form>
The Submit Button <submit>
The <input type="submit"> defines a button for submitting the form data to a form-
handl
<form action="">
<label for="first-name">First Name:
<input type="text" value="Abebe">
</label>

<label for="last-name">Last Name:</label>


<input type="text" id="last-name" value="Kebede">
<input type="submit" value="Submit">
</form>
The name attribute for <input> tag
• Notice that each input field must have a name attribute to be submitted.
• If the name attribute is omitted, the value of the input field will not be sent at all.
• <form>
• <input type="checkbox" name="language" id="am">
• <label for="am">AMHARIC</label> <br>

• <input type="checkbox" name="language" id="or">


• <label for="or">Oromiffa</label> <br>
• </form>
Emojis in HTML
• Emojis are characters from the UTF-8 alphabet:
• 😄 is 128516
• 😍 is 128525
• 💗 is 128151
Example:
<p>&#128512;</p>

You might also like