Scribd
Upload
9 views48 pages

Avd CH 1

The document outlines the course 'Advanced Website Development and Management' at Ambo University, focusing on HTML and CSS fundamentals. It covers key concepts such as markup languages, HTML document structure, tags, attributes, and the creation of web pages. The objectives include understanding HTML and CSS, creating web content, and applying styling techniques.

Uploaded by

Jafar Mustefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views48 pages

Avd CH 1

The document outlines the course 'Advanced Website Development and Management' at Ambo University, focusing on HTML and CSS fundamentals. It covers key concepts such as markup languages, HTML document structure, tags, attributes, and the creation of web pages. The objectives include understanding HTML and CSS, creating web content, and applying styling techniques.

Uploaded by

Jafar Mustefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

AMBO UNIVERSITY WOLISO CAMPUS

School of Technology and Informatics Department of BAIS

Course Title: Advanced Website Development Course Code: BAIS 4052; ECTS: 5
and Management

Chapter One
Overviews of HTML and CSS Fundamentals

BAIS 4052 : Advanced Website


Development and Management
BSc(IS) 3rd Year, 1st Semester, 2018 E.C

JAFAR B.

2/24/2026
Obejctives
2

 After completing this chapter, students should be able to:


 Understand the Concept of Markup Language
 Explain the Structure of an HTML Document
 Differentiate Between HTML Elements and Tags
 Create Basic Web Page Content Using HTML
 Understand HTML Formatting and Layout Techniques
 Introduce Cascading Style Sheets (CSS)
 Apply CSS Syntax and Selectors
 Style Web Pages Using CSS
 Differentiate Types of CSS

2/24/2026
HTML
3

What is Markup language?


• A Markup language is a programming language that makes text interactive and
dynamic, transforming it into images, tables, links, etc.
• HTML, which stands for Hyper Text Mark-up Language, is specifically used for
describing web documents.
• It consists of markup tags that define various content types within a document, with
HTML documents combining these tags and plain text.
• HTML enables the publishing of documents on the Internet in a platform-independent
format,
• the creation of links to related works, the inclusion of graphics and multimedia data.
• linking to external non-Web information resources.

2/24/2026
HTML
4

 HTML Tags
 HTML tags are element names surrounded by angle brackets:<tagname>
content goes here..</tanname>

 HTML tags typically appear in pairs, consisting of a start tag and an end tag.

 The end tag written like the start tag but includes a forward slash before the
tag name. Eg:- <TITLE>Introduction to HTML</TITLE>

2/24/2026
Markup…
5

HTML tags are mainly of two types:

 Container Tag: A Container tag is one that activates an effect and that has a companion

tag that discontinues the effect.


 E.g. <B> together with its companion closing tag </B>, causes all text found between them to be
rendered in bold.

 Standalone Tag: A Standalone tag is one that does not have a companion tag.

 E.g. the <IMG> tag simply places an image on a page

2/24/2026
Markup…
6

Most commonly used character entities


Result Description Entity Name
Non-breaking space &nbsp;
< Less than &lt;
> Greater than &gt;
& Ampersand &amp;
“ Quotation mark &quot;
© Copyright &copy;

2/24/2026
HTML Documents = Web Pages
7

 HTML Documents Contain Tags and Plain Text


 An HTML document consists of:

 HTML tags – special keywords enclosed in angle brackets (e.g., <p>, <h1>, <body>) that tell
the browser how to display content.
 Plain text – the actual content (words, images, links) shown on the web page.
 HTML Documents Are Also Called Web Pages
 When an HTML file is opened in a browser, it becomes a web page.
 Therefore, HTML documents and web pages refer to the same thing.
 Purpose of a Web Browser
 A web browser (such as Chrome, Firefox, or Edge) reads HTML documents and
displays them visually as web pages.
 The browser does not show the HTML tags. Instead, it interprets the tags and uses them to
format and display the content properly.
2/24/2026
HTML Document Structure
8
 The document describe the structure of an HTML document, which include three key
components: the HTML declaration, HEAD, and BODY tags.
<!DOCTYPE html>:-Declares that the document
is HTML5. It tells the browser which version of
HTML is used.
<html>:-The root element of the page. All HTML
content is inside this tag.
<head>:-Contains meta-information about the
page (not displayed directly on the webpage).
Examples:-<title>, <meta>, <link>

<body>:-Contains the visible content of the web page such as: Headings (<h1>–<h6>),
Paragraphs (<p>),Images (<img>) , Links (<a>),Tables, forms, etc.

2/24/2026
HTML Elements & Attributes
9

HTML Element
The <h1>element defines a large heading
The<p> element defines a paragraph

An HTML element usually consists of a start tag and end tag, with the content
inserted in between:<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag: <p>My first
paragraph.</p>

HTML elements with no content are called empty elements.

Empty elements do not have an end tag, such as the <br> element (which
indicates a line break).
2/24/2026
HTML Elements & Attributes
10
 HTML Attributes provide additional information about HTML elements.
 All HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value“
<p title=“My Web page “>This is a paragraph.</p>
<a href="[Link] is a link</a>
<img src="[Link]" width="104" height="142">
Heading Tags
 Any document starts with a heading. You can use different sizes for your headings.

 HTML also has six levels of headings, which use the elements h1, h2 , h3 , h4 , h5 , and

h6 .
 While displaying any heading, browser adds one line before and one line after that
heading.
2/24/2026
Centring Content
11

 You can use<center> tag to put any content in the centre of the page or any table cell.
<!DOCTYPE html> <html>
<head>
<title>Centring Content Example</title> </head>
<body><center><p>This text is not in the center.</p></center>
<center> <p>This text is in the center.</p> </center>
</body> </html>

Horizontal Lines
 Horizontal lines serve to visually separate sections within a document.
 The tag generates a horizontal line that extends from the current position to the right
margin.
 For example, you may want to give a line between two paragraphs as in the given example
below:
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>

2/24/2026
Horizontal Lines
12
 Again <hr/>tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
 The <hr/> element has a space between the characters hr and the forward slash.

Nonbreaking Spaces
 In cases, where you do not want the client browser to break text, you should use a nonbreaking
space entity &nbsp; instead of a normal space.

 <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>

2/24/2026
HTML Formatting Elements
13

 HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

 Formatting elements were designed to display special types of text:

2/24/2026
HTML Links
14

 HTML links are defined with the <a> tag:<a href="url">link text</a> .

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

 Attributes are used to provide additional information about HTML elements.


 Example:<a href="[Link] our HTML tutorial</a>
HTML image
 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="Smiley face" height="42" width="42">

2/24/2026
HTML Lists
15

 HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

 The list items will be marked with bullets (small black circles) by default:

Ordered HTML List


 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
 The list items will be marked with numbers by default:
HTML Description Lists
 HTML also supports description lists.

 A description list is a list of terms, with a description of each term.

 The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:

2/24/2026
Defining an HTML Table
16

 HTML Tables is used to preset data in rows and columns format.

 A Table is the collection of rows and rows is the collection of columns.

 <tr> stands for table rows. To add a row in a table <table row> tags are used.

 <td>or <th> is used to put the column inside the row.

 Whereas <td> means table data and <th> means table head.
Syntax: <table>
<tr>
<td>row1col1</td>
<td>row2col2</td>
</tr></table>

2/24/2026
HTML Forms
17

 HTML Forms are required, when you want to collect some data from the site visitor.

 For example, during user registration you would like to collect information such as

name, email address, credit card, etc.

 A form will take input from the site visitor and then will post it to a back-end

application such as CGI, ASP Script or PHP script etc.

 There are various form elements available like text fields, text-area fields, drop-

down menus, radio buttons, checkboxes, etc.

 The HTML <form> tag is used to create an HTML form and it has following syntax:
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc.
</form>

2/24/2026
HTML Buttons
18

 HTML buttons are defined with the <button>tag.


 The <button>tag defines a clickable button.
 Inside a<button> element you can put content, like text or images.
 This is the difference between this element and buttons created with the <input>
element.
Example: -Two button elements that act as one submit button and one reset
button (in a form):
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>

2/24/2026
HTML Form Attributes
19

The Action Attribute


 The action attribute defines the action to be performed when the form is submitted.
 Usually, the form data is sent to a file on the server when the user clicks on the submit
button.
 In the example below, the form data is sent to a file called "action_page.php". This
file contains a server-side script that handles the form data:
 Example:-On submit, send form data to "action_page.php":

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

2/24/2026
HTML Form Attributes
20

The Target Attribute


 The target attribute specifies where to display the response that is received after
submitting the form.
 The target attribute can have one of the following values:

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
frame name The response is displayed in a named iframe

2/24/2026
HTML Form Attributes
21

 The default value is _self which means that the response will open in the current
window.
 Example:-Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
The Method Attribute
 The method attribute specifies the HTTP method to be used when submitting the form
data.

 The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
 The default HTTP method when submitting form data is GET.
 Example 1:-This example uses the GET method when submitting the form data:-
<form action="/action_page.php" method="get">

2/24/2026
The Method Attribute
22
 Example 2:-This example uses the POST method when submitting the form data:
<form action="/action_page.php" method="post">
GET Method:
 Appends the form data to the URL, in name/value pairs
 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google
POST method :
 Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)

 POST has no size limitations, and can be used to send large amounts of data.

 Form submissions with POST cannot be bookmarked


Tip: Always use POST if the form data contains sensitive or personal information!
2/24/2026
HTML Form Elements
23

 The HTML <form> element can contain one or more of the following form
elements:<input>,<label>,<select>,<textarea>,<button>,<fieldset>,<legend>,<datali
st>,<output>,<option>,<optgroup>
The <input> Element
 One of the most used form elements is the <input> element.
 The <input> element can be displayed in several ways, depending on
the type attribute.
Example:<labelfor="fname">Firstname:</label><input type="text" id="fname" name="fna
me">
 There are many types of input elements. Input elements are defined between the
form tags.
 To use an input element, use an input tag and specify the type of the input.
 Text fields, Radio buttons, Check boxes, Submit buttons,Password field,Button,
Hidden field, File input type, Reset buttons…

2/24/2026
Input Type Text
24
TEXT is the most common type of input field, it allows the user to type in a single line of
text.
There are some additional attributes that can control the maximum length of the field
(MAXLENGTH).
<input type="text"> defines a single-line text input field:
 Used when you want the user to type letters, number, etc.
<form>
First name: <input type="text" name= "firstname"> <br/>
Last name: <input type="text" name="lastname"> </form>
Input Type Password
 <input type="password"> defines a password field:
 The characters in a password field are masked (shown as asterisks or circles).
Example:-
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><b>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

2/24/2026
Input Type Submit
25

 <input type="submit"> defines a button for submitting form data to a form-


handler.
 The form-handler is typically a server page with a script for processing input
data.
 The form-handler is specified in the form's action attribute:
<form name="input" action=“[Link]" method="get">
Username: <input type="text" name="user"/><br>
Password: <input type ='password' id ="pwd" name ='pwdd'/><br>
<input type="submit" value="Submit"> </form>

2/24/2026
Input type Checkboxes
26
 Inputs of type CHECKBOX present user with an item that can be selected or deselected.
 Each checkbox has a name and a value and can be initially selected/deselected.
 Used when you want the user to select one or more options of a limited number of
choices.
<form> Mark all you Favorite Programming Language: <br />
<input type="checkbox" name="Language" value ="HTML"> HTML </input><br>
<input type="checkbox" name="Language" value="CSS"> CSS </input> <br>
<input type="checkbox" name="Language" value="JavaScript"> JavaScript</input><br>
<input type="checkbox" name="Language" value="Python"> Python</input> </form>
</form>

2/24/2026
Radio Buttons
27

 Radio Button inputs are like checkboxes, except that the user must select only one

item from group of choices.

 Used when you want the user to select one of a limited number of choices.
Pull-down/Drop-down list
 The SELECT and OPTION tags can be used to create pull-down menus and scrolling lists of choices.
 The SELECT tag must include a NAME attribute (this is the name of the form field sent by the
browser).
 Between the <SELECT> tag and the corresponding end tag </SELECT> there can be number of
OPTION tags - one for each choice you want displayed.
 The text that follows the OPTION tag is the text that will be displayed by the browser.
 The value sent by the browser if a choice is selected can be specified with a VALUE attribute, if none is
specified the value sent will be the text that follows the OPTION tag.

2/24/2026
Cascading Style Sheets(CSS)
28

 CSS, introduced with HTML 4, enhances the styling of HTML elements and

solves presentation issues.

 As a style sheet language, it defines the display of HTML documents, making

pages more attractive.

 The advantages of CSS include time-saving, faster loading, ease of

maintenance, platform independence, and multi-device compatibility.

 CSS is a language used to describe the style and display of HTML documents,

enabling easy control over web document aesthetics.

2/24/2026
CSS
29

Why Use CSS?


 CSS is used to define styles for your web pages, including the design, layout and

variations in display for different devices and screen sizes.


CSS Syntax and Selectors
CSS Syntax
 A CSS rule-set consists of a selector and a declaration block:

2/24/2026
CSS Syntax and Selectors
30
 The selector points to the HTML element you want to style.
 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.
 The property is the style attribute you want to change. Each property has a value.
selector { property: value }
 A CSS declaration always ends with a semicolon, and declaration blocks are

surrounded by curly braces.


Example :-In this example all <p> elements will be centre-aligned, with a red text color:
p{
color: red;//declaration
text-align: centre ;
}
2/24/2026
CSS Syntax and Selectors
31

CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

The element Selector


 The element selector selects elements based on the element name.

Example:-You can select all <p> elements on a page like this (here, all <p>
elements will be center aligned, with a red text color):
p{
text-align: center;
color: red;
}

2/24/2026
The id Selector
32

 The id selector uses the id attribute of an HTML element to select a specific


element.
 The id of an element should be 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.
Example:-The style rule below will be applied to the HTML element with
id="para1":
#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!

2/24/2026
The CSS class Selector
33

 The class selector in CSS targets HTML elements with a specific class attribute using a

period (.) followed by the class name.


 For Example, the rule `.center { text-align: center; color: red; }`
 designates all elements with class "center" to be red and center-aligned.

 Specificity can be applied to target only certain elements, like:-

 `[Link] { text-align: center; color: red; }`, which affects only `` elements with the "center"
class.

 Elements can have multiple classes, as demonstrated by ``, which applies styles from

both "center" and "large" classes.


 E.g:-class="center" and to class="large": This paragraph refers to two classes.
Note: A class name cannot start with a number!

2/24/2026
The CSS Universal Selector
34
 The universal selector (*) selects all HTML elements on the page.
 If you define style with universal selector, then it will apply on every element.
 Example:-The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;}
Grouping Selectors
 The grouping selector selects all the HTML elements with the same style definitions.
 Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
 Example In this example we have grouped the selectors from the code above: h1, h2, p { text-align: center;
color: red; } Note: Grouping selectors can minimize code by separating each selector with a comma.

h1 { h2 { p{
text-align: center; text-align: center; text-align: center;
color: red; color: red; color: red;
} } }
2/24/2026
CSS Links
35

 Link is one of the tags that need CSS to be applied. As you see on previous lesson,
html links are not attractive.
 In order to make it user attractive, you have to apply CSS.

 Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
 The four links states are:-
 a:link - a normal and any link but not visited

 a:visited - a link the user has visited

 a:hover - a link when the user's mouse over it

 a:active - a link the moment it is clicked

While using the four states, a:hover must come after a:link and a:visited. And a:active
must come after a:hover.

2/24/2026
CSS Margin and padding
36

 Padding property defines the space between an element's content and its

border, applicable on all sides.

 It does not accept negative values, and values can be specified in length,

percentage, or as "inherit" from the parent element, with percentage based on the
containing box..

 The padding property is a shorthand property for the following individual

padding properties: padding-top ,padding-right, padding-bottom ,padding-left

2/24/2026
CSS Margin and padding
37

Example :-h1 { padding: 10px 20px 30px 15px; }


This means, top padding is 10px, right padding is 20px, bottom padding is 30px and left
padding is 15px. Or you can specify specifically using the above four padding properties.
 If padding has three values, then the first is for top, the second is for right and left and the third
will be for bottom.

 If it has two values, the first is for top and bottom and the second will be for right and left.

 If it has one value, then all the four will take that value.

CSS Margin
 The CSS margin properties are used to generate space around elements (outside the
border).
 The margin does not have a background color, and is completely transparent.
 It is possible to use negative values to overlap content.

2/24/2026
CSS Margin
38

 The value of this attribute should be a length or a percentage.

 Percentage specifies a margin in % of the width of the containing element.

 The margin property allows you set all of the properties for the four margins (margin-top,
margin-right, margin-bottom and margin-left) in one declaration.
 It works as the same fashion as padding does.
Note :Negative values are not allowed for padding but possible in the case of margin.
CSS Border
 The border properties allow you to specify how the border of the box representing an
element should look.
 There are three properties of a border you can change, border-color specifies the
color of a border, border-style specifies what kind of border to display (the values are
listed below) and border-width specifies the width of a border.
2/24/2026
CSS Border
39

 Border style has to be set to see the value of others (colour and width). Some of values
of border-style are:
 none: Defines no border
 dotted: Defines a dotted border
 dashed: Defines a dashed border
 solid: Defines a solid border
 double: Defines two borders.
 The width is set in pixels, or by using one of the three pre-defined values: thin, medium,
or thick.
 Use the "border-style" property to set the borders first.
 The border-color is used to specify the color of border to be displayed.
 Color can be assigned using hexadecimal, RGB or by its name. You can also set the
border color to "transparent".

2/24/2026
Border - Individual sides
40

It is possible to have different borders for different sides using:


 border-top-style
 border-right-style
 border-bottom-style
 border-left-style
you can also use "border-style" only with a value from one to four.
 If it has four values like: border-style:dotted solid double dashed;
 It means: top border is dotted, right border is solid, bottom border is double and
left border is dashed.
 border-style:dotted solid double;It means: top border is dotted, right and left
borders are solid and bottom border is double.
border-style:dotted solid; In this case, top and bottom borders are dotted
and right and left borders are solid.

2/24/2026
Border - Individual sides…
41

border-style: dotted; Then all four borders are dotted.

 To shorten the code, it is also possible to specify all the individual border
properties in one property.

 The "border" property is a shorthand property for the border-width, border


style (required) and border-color.
 Example :-p { border: thin solid red; } This code results thin solid border with red colour.

2/24/2026
Border radius
42

 After setting border for the element, sometimes we may need to have non sharp

edge on every angle or some of them.


 "border-radius" is used for that. p { border: thin solid red; border-radius:20px; }

Four sides of the border are rounded with 20px. As the pixel increases the
roundness of the edges increases.

p { border: thin solid red; border-bottom-left-radius:20px; border-top-right-radius:20px;

On the above example "border-bottom-left-radius" is set with 20px and the left
bottom side is rounded as you can see it. The same for "border-top-right-radius".

2/24/2026
CSS table
43
 Table is one of the HTML elements that can improve using CSS.
 There are lots of features that we can see. "border" property is used to specify table's border.
table { border: 1px solid black; }

The CSS code above gives border for outer table, not for each cell. Check the following code:
table td { border: 1px solid black; } table {

 Here both table and td have border with 1px solid and black color, so that the
table will looks like as the output.
 "border-collapse" property helps the table to have single border, if it was not
set or if its value is "separate" then the border looks like each cell has its own
rectangle border.
 Other properties like "vertical-align", "text-align", "padding", "height", "width",
"color", "background-color" can also be used.
2/24/2026
CSS table
44

td { border-bottom: 1px solid black; }


table{ border-collapse:collapse; } tr:hover{ background-color:#CFF;

"border-bottom" allows having border only on the bottom part.


"tr:hover" is used to apply change when the user takes mouse over the row.
In this case the background color will change when mouse over through the
row.
 "tr:nth-child(odd)" will apply change according to the value on every odd
rows.
You may change "odd" with "even".
2/24/2026
CSS shadow
45

 Having shadow to text, elements and boxes using CSS is possible through
CSS3.
 There are two major shadow properties "text-shadow" and "box-shadow".
h1 { text-shadow: 3px 3px 2px blue;
Values for "text-shadow", the first 3px is for horizontal shadow, the next one is for vertical
shadow.
2px is called blur effect, how much should the color distribute as a shadow. And "blue" is
the color of the shadow.
CSS Box Shadow
CSS box-shadow Property
 The CSS box-shadow property is used to apply one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow
 In its simplest use, you only specify a horizontal and a vertical shadow.
 The default color of the shadow is the current text-color.

2/24/2026
CSS Box Shadow
46

 A <div> element with a box-shadow


 Example:-Specify a horizontal and a vertical shadow:
div {
box-shadow: 10px 10px;
}
Specify a Color for the Shadow
 The color parameter defines the color of the shadow.
 A <div> element with a lightblue box-shadow
 Example :-Specify a color for the shadow:
div {
box-shadow: 10px 10px lightblue;
}

2/24/2026
Types of CSS Style
47

There are three ways of inserting a style sheet

 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

The most common way to add CSS, is to keep the styles in external CSS files.

2/24/2026
Ended!
48

Chapter one
Overview HTML and CSS Fundamentals

Course Code: BAIS 4052 :


Advanced Website Development
and Management
BA(BAIS) 3nd Year, 2nd Semester, 2018 E.C

2/24/2026

You might also like