BUI-CSC 101: Introduction to

Web Development
Olaniyan Deborah O. (Ph.D)
 Principles of Lecture Etiquette

❖ Arrive on time and ❖ Please refrain from

making noise. If you feel
avoid disrupting the
drowsy, it's best to leave
class by coming in and rest at home.
late. ❖ If you need to check
❖ Cell phones are not emails or browse the

permitted. internet, kindly do so

outside of the classroom.
❖ Entering and leaving
❖ Only open your computer
the room should be when instructed to do so.
done purposefully,
not randomly.
 Course Curriculum
• Course Contents • Learning outcomes
– Web Development, Web – Upon completion of the course,
Applications vs. Traditional students will be able to:
Applications. – recognize the basic architecture
– Modern Web Application of a web application including
Architecture. the front end, back end, and
– Programming for the Web. basic importance of HTML, CSS,
Writing and Running Code. and JavaScript in a web page.
– Anatomy of HTML. – describe the parts of HTML
– Creating an HTML Web Page. mark-up including elements,
tags, and attributes.
– Semantic HTML. – identify the importance of
– Anatomy of CSS. semantic HTML in web
– Working with CSS and HTML development.
Together. – describe the parts of CSS syntax
– Anatomy of JavaScript. Writing including styles, rules, and
JavaScript for the Web. properties.
– design web pages that uses
javascript
 Course Curriculum

• Course Contents Break-down

– Practical – 5marks *2 sessions=10marks
– Presentation-10marks
– Test(PRACTICAL)-10marks
– Exam -70marks

– Good luck
Introduction to Web Development

• Week 1
• What is Web Development?
 Week1: Introduction to Web
Development
• Web Development: The process of creating websites
or web applications.
• Building Blocks:
– HTML (Structure)
– CSS (Presentation)
– JavaScript (Interactivity)
• Types:Static Websites: Fixed content (e.g., personal
blogs, portfolios).
• Dynamic Websites: Change content in response to
user input (e.g., e-commerce, social media).
• Web Applications: Functionality similar to desktop
apps but run in the browser (e.g., Google Docs,
Twitter).
 Week1: Introduction to Web
Development
• Types of Web Development
• Front-End Development:
– Focuses on user interface and experience (UI/UX).
– Technologies: HTML, CSS, JavaScript frameworks like React, Angular.
– Tools: Visual Studio Code, Chrome DevTools.
• Back-End Development:
– Focuses on server logic, database management.
– Technologies: Node.js, Python, PHP, databases like MySQL or
MongoDB.
– Tools: Postman (for API testing), command-line interfaces.
• Full-Stack Development:
– Combines both front-end and back-end.
– Full-stack developers handle all aspects of a web project.
 Week1: Introduction to Web
Development
• What are Traditional Applications?
• Definition: Software installed on a computer or device (e.g.,
desktop programs).
• Key Features:
– Runs locally, does not rely on internet connectivity.
– Requires installation (e.g., Microsoft Office, Photoshop).
– OS-specific (Windows, macOS).
– Updates need to be manually installed by the user.
• Examples:
– Microsoft Word (desktop version)
– Adobe Photoshop
– Standalone games like "The Sims."
 Week1: Introduction to Web
Development
• Web Applications
• Title: What are Web Applications?
• Definition: Applications that run in a web browser, accessible over the
internet.
• Key Features:
– Accessible from any device with internet and a browser.
– No installation required, available immediately via URLs.
– Auto-updates—updates are deployed to the server and are instantly
available to users.
• Examples:
– Google Docs (online word processing)
– Facebook, Twitter (social media)
– Spotify Web Player (streaming music)
 Week1: Introduction to Web
Development
Web vs. Traditional Applications

Feature Traditional Applications Web Applications

Installation Yes, installed locally No, accessed via browser

Access Limited to specific device Accessible from any device

Connectivity Often works offline Requires internet

Updates Manual, user-driven Automatic, server-driven

Device Dependency Tied to device/OS Cross-platform

Microsoft Word, Adobe Google Docs, Gmail,

Examples
Photoshop Facebook

Feature Traditional Applications Web Applications

 Week1: Introduction to Web
Development
• Modern Web Application Architecture
• Key Elements:
– Client-Side (Front-End):
• Browser-based interface.
• Technologies: HTML, CSS, JavaScript.
• Examples: Single-page applications (SPAs) like Gmail.
– Server-Side (Back-End):
• Manages data, logic, and APIs.
• Technologies: Node.js, Python, Ruby, etc.
– Databases:
• Stores data in relational (SQL) or non-relational (NoSQL) databases.
– APIs:
• Facilitate communication between the front-end and back-end.
• RESTful APIs or GraphQL.
– Cloud Services:
• Web applications often hosted in the cloud (AWS, Azure).
 Week1: Introduction to Web
Development
• Components of Modern Web Applications
• Front-End:
– Technologies: HTML, CSS, JavaScript (React, Angular, Vue).
– Handles user interaction, aesthetics, and usability.
• Back-End:
– Handles business logic, database interactions, and security.
– Languages: Node.js, Python, PHP, Ruby.
• APIs:
– Connect the front-end to the back-end.
– Use RESTful APIs or GraphQL to send and receive data.
• Databases:
– Store and manage data.
– Examples: MySQL, MongoDB (NoSQL).
• Cloud Infrastructure:
– AWS, Google Cloud, Microsoft Azure.
– Provides scalability, storage, and computing power.
 Week 1 – Introduction to Web
Development
• What is Client-Side Programming?
• Client-Side:
– Runs directly in the user’s browser.
– Focuses on the user interface and experience.
– Technologies: HTML, CSS, JavaScript.
– Examples:
• Adding interactivity (JavaScript buttons, animations).
• Styling web pages (CSS).
• Structuring content (HTML).
 Week 1 – Introduction to Web
Development
• What is Server-Side Programming?
• Server-Side:
– Executes on the web server before sending the
result to the browser.
– Manages data and handles backend logic.
– Technologies: Node.js, PHP, Python, Ruby.
– Examples:
• User authentication.
• Database interactions (e.g., MySQL).
• Generating dynamic content (server-rendered HTML).
 Week 1 – Introduction to Web
Development
Client-Side vs. Server-Side Programming

Client-Side Server-Side
Aspect
Programming Programming
Runs on the Runs on the web
Execution
user’s browser server
HTML, CSS, Node.js, PHP,
Languages
JavaScript Python, Ruby
User interface Business logic,
Role
and interaction data management
Depends on the Depends on
Performance
user's device server capacity
Vulnerable to Typically more
Security client-side secure, server-
attacks controlled
Form validation Database queries,
Examples
(JS), Animations user login
 Week1: Introduction to Web
Development
• Summary
– Web development involves building applications
that run on browsers using technologies like
HTML, CSS, and JavaScript.
– Web Applications: Accessible anywhere, no
installation required, and automatically updated.
– Traditional Applications: Installed locally on a
device, require manual updates, and are OS-
specific.
– Modern Web Architecture: Client-server model
with APIs, cloud services, and scalable databases.
 Week1: Introduction to Web
Development
• Why Web Applications?
• Advantages:
– Cross-Platform: Runs on any device with a browser.
– No Installation: Instant access via a URL, no setup
required.
– Centralized Updates: No need for users to install
updates.
– Cost-Effective: Lower development and distribution
costs.
– Real-Time Collaboration: Web apps often include
real-time features (e.g., Google Docs).
– Security: Centralized control allows developers to
enforce security updates more easily.
 Week1: Introduction to Web
Development
• Questions and Discussion
– How does web development improve accessibility
compared to traditional applications?
– What are the key reasons businesses and developers
are shifting to web applications over traditional
software?
– Can you think of any hybrid applications that work
both offline and online?
• (Leave space for interactive discussion, and
encourage students to share examples or
thoughts.)
Overview of Web Programming
Languages
• Week 2
• Overview of Web Programming
Languages
 Week 2 – Setting up a Development
Environment
• Setting Up a Web Development Environment
• Text Editors:
– Choose a powerful text editor to write and manage your code.
– Popular options:
• Visual Studio Code: Free and feature-rich with extensions.
• Sublime Text: Lightweight and customizable.
• Atom: Open-source with GitHub integration.
• Browsers for Testing:
– Use modern browsers for development:
• Google Chrome: Includes Chrome Developer Tools for debugging.
• Firefox: Developer-friendly features.
• Safari and Edge: Additional testing for compatibility.
 Week 2 – Basic Structure of HTML,
CSS, JavaScript
• HTML (Hypertext Markup Language) is
used to structure content on the web. Explanation
• Basic Structure of an HTML Document:
• <!DOCTYPE html> <!DOCTYPE html>: Declares
<html>
<head>
the document type.
<title>My First Web Page</title>
<style></style>
<html>: Root element of the
<script></script> page.
</head>
<body> <head>: Contains meta-
<h1>Welcome to My Website</h1>
<p>This is my first paragraph.</p> information, such as the
</body> </html>
title.
<body>: Contains the visible
content (e.g., headings,
paragraphs).
Week 2 – Basic Structure of HTML,
CSS, JavaScript
 Week 2 – Running Your HTML, CSS,
and JavaScript in Browsers
• How to Run HTML, CSS, and JavaScript:Create a New HTML
File:
– Save your HTML code with a .html extension (e.g., index.html).
• Open in a Web Browser:
– Open the .html file in your browser (double-click the file or right-click
and choose Open with).
• Link CSS and JavaScript:
– CSS: Add a <style> tag in the <head> section.
– JavaScript: Use a <script> tag at the bottom of the <body> section.
• Check the Results:
– Observe how HTML structures the content, CSS styles it, and
JavaScript adds interactivity.
 Week 2 – Overview of Web
Programming Languages
• Core Web Programming Languages • Example
• HTML (Hypertext Markup
Language): • HTML: <h1>Welcome
– Structures the content of web pages. to My Website</h1>
– Defines elements like headings,
paragraphs, images, and links. • CSS: h1 { color: blue;
• CSS (Cascading Style Sheets):
– Adds styling and layout to HTML text-align: center;}
content.
– Controls colors, fonts, spacing, and • JAVASCRIPT:
positioning. document.getElementB
• JavaScript:
– Adds interactivity and dynamic
yId("demo").innerHTML
features to web pages. = "Hello World!";
– Manipulates HTML and CSS in real-
time.
 Week 2 – Role of HTML in Web
Development
• HTML: The Structure of Web Pages
• Purpose:
– Defines the structure and content of web pages.
– HTML elements are the building blocks of web pages.
• Common HTML Elements:
Headings: <h1> to <h6>
Paragraphs: <p>
Images: <img>
Links: <a>
Lists: <ul>, <ol>, <li>
Tables: <table>
Forms: <form>
 Week 2 – HTML, CSS, JavaScript,
Running and Testing Code in Browsers
• Writing Code in CSS Explanation;
• CSS (Cascading Style Sheets) is
used to style HTML content. • Selectors (e.g., h1, p):
• Basic CSS Example: Target HTML elements to
h1 {
color: blue; apply styles.
font-family: Arial, sans-serif;
text-align: center; • Properties (e.g., color, font-
} family, text-align): Specify
p{ the styles.
font-size: 16px;
line-height: 1.5; • Values (e.g., blue, Arial,
}
center): Define the specific
style settings.
Week 2 – Role of JavaScript in Web
Development
• JavaScript: Adding function validateForm() {
Interactivity to Web x=document.getElementById("
Pages fname").value;
• Purpose: if(x==""){
– JavaScript brings web
pages to life by adding alert("Name must not be
interactivity and dynamic empty!")
content.
– Can manipulate both }else{alert("You entered " + x)}
HTML and CSS using the
DOM (Document Object
Model). }
• Examples of JavaScript
Features:
– Real-time form validation
 Week 2 – HTML, CSS, JavaScript,
Running and Testing Code in Browsers
• JavaScript adds Explanation;
interactivity and • document.getElementById():
dynamic behavior to Selects an HTML element by its
ID.
web pages.
• Event Listener (onclick): Detects
• Basic JavaScript when the button is clicked.
Example: • alert(): Displays a pop-up
document.getElementById("myButton").onclick = function() { message to the user.
alert("Button was clicked!");
}

• HTML with JavaScript

<button id="myButton">Click Me!</button>
<script src="myscript.js"></script>
 Week 2 – Common Rules

• In HTML and CSS, both class and

Feature id class
id are used to apply styles or Can be
identify elements, but they Unique,
Uniquenes used on
serve different purposes and used only
have distinct rules for use.
s multiple
once
elements
• In practice, use id when you
need to uniquely identify an CSS .class-
element for styling or #id-name
Selector name
scripting, and use class when
you want to apply common Style or
Identify a
styles or behavior to multiple group
Purpose single
elements. multiple
element
elements
Reusable
Not
 Week 2 – Common Rules
<!DOCTYPE html> // Change the header's background color
<html> document.getElementById('header').style.ba
<head> ckgroundColor = 'red';
<style> // Change the background color of all menu
#header { background-color: blue; } items
.menu { color: green; } const menus =
</style> document.getElementsByClassName('m
</head> enu');
<body> for (let i = 0; i < menus.length; i++) {
<div id="header">This is the header</div> menus[i].style.backgroundColor =
<div class="menu">Menu 1</div> 'lightblue';
<div class="menu">Menu 2</div> }
<div class="menu">Menu 3</div>
});
<script>
// Ensure the code runs after the page is fully loaded </script>
document.addEventListener('DOMContentLoaded', </body>
function() { </html>
 Week 2 – Testing Code in Web
Browsers
• Common Browsers for Web Development:
– Google Chrome
– Mozilla Firefox
– Microsoft Edge
– Safari
• How to Test Code:
– Open the HTML file in your browser.
– Test responsiveness by resizing the browser window.
– Check the functionality of buttons, forms, and interactive elements.
• Cross-Browser Compatibility:
– Always test your code in multiple browsers to ensure compatibility.
– Different browsers may render CSS and JavaScript differently.
 Week 2 – Testing Code in Web
Browsers
• What is Debugging?
• Debugging is the process of finding and fixing errors (bugs) in your code.
• Common issues: syntax errors, logic errors, and runtime errors.
• How to Debug HTML, CSS, and JavaScript:
• View the Console:
– Use browser Developer Tools (right-click and choose Inspect) to open the
console.
• Check the DOM:
– Use the Elements tab in DevTools to inspect your HTML structure.
– See how CSS styles are applied and override them in real-time.
• Fix the Code:
– Use the information from DevTools to identify and fix issues in your code.
 Week 2 – Testing Code in Web
Browsers
• Inspecting HTML and CSS:
– Right-click any element on the page and choose
Inspect.
– See the CSS applied to each element and make live
changes to test new styles.
• JavaScript Breakpoints:
– Set breakpoints in the Sources tab of DevTools to
pause JavaScript execution and inspect variables at
specific points.
 Week 2 – Common Web Development
Errors
• HTML Errors:
– Missing closing tags (e.g., <p> without </p>).
– Incorrect nesting of elements (e.g., putting a block-level
element inside an inline element).
• CSS Errors:
– Forgetting to use semicolons (;) after each property.
– Incorrect use of units (e.g., mixing px and %).
• JavaScript Errors:
– Syntax errors (missing brackets, semicolons).
– Undefined variables or accessing elements before they are
loaded.
 Week 2 – Web Development
• Summary
• Key Web Technologies:
– HTML provides structure.
– CSS adds style.
– JavaScript enables interactivity.
• Setting Up a Development Environment:
– Use text editors like Visual Studio Code to write and organize code.
– Test your web applications in modern browsers with developer tools.
• Writing Code: You’ve learned how to write and organize code using
HTML, CSS, and JavaScript.
• Running Code: You know how to run and test code in web browsers.
• Debugging: You’ve been introduced to debugging tools and techniques
to find and fix errors in your code.
 Week 2 – Assignment

• On a 2-page A4 paper, design the

home page, print out the webpage
design on 1page and print the
code with your name boldly
written on it on another page.
Week 3 – Anatomy of HTML

• Week 3
• Anatomy of HTML
 Week 3 – Anatomy of HTML
• DOCTYPE Declaration • What are Tags?
• What is DOCTYPE? • Tags are special keywords in HTML
– Declares the type of the that define how content should be
document, ensuring proper structured and displayed on a web
rendering by the browser. page. They are enclosed in angle
– For HTML5, it is declared as: brackets (< >).
<!DOCTYPE html> • Tags usually come in pairs:
• Purpose: – An opening tag (e.g., <p>) that
– Ensures the browser understands starts the content.
that the document is in HTML5 – A closing tag (e.g., </p>) that ends
format. the content.
– Helps browsers render the page – The closing tag has a slash (/)
consistently across different before the tag name to show
environments. where the element ends.
Week 3 – Anatomy of HTML
This is a tag
 Week 3 – Anatomy of HTML
• What are Elements?
• An element consists of the
opening tag, the content,
and the closing tag (if there
is one).
• Elements can contain text,
images, or even other
elements.
• Example:
– <h1>Hello, World!</h1>
– <h1> is the opening tag.
– Hello, World! is the content.
– </h1> is the closing tag.

• Together, they form an

element.
 Week 3 – Anatomy of HTML
• How Tags and Elements • Summary:
Work • Tags are the
• Tags tell the browser how to structure
and format content: instructions to the
• Headings: <h1>, <h2>, etc. (for browser.
titles)html
– <h1>Main Title</h1> • Elements are the
• Paragraphs: <p> (for regular text)html content blocks that
– <p>This is a paragraph of text.</p>
• Images: <img> (to display pictures)
those tags define.
– <img src="picture.jpg" alt="A nice view"> • Together, they allow us
• Links: <a> (to create clickable to build the structure
links)html
– <a and layout of a web
href="https://www.example.com">Visit
Example</a> page.
 Week 3 – Anatomy of HTML
• Attributes
• Attributes provide
additional information
about the contents of
an element. They
appear on the opening
tag of the element and
are made up of two
parts: a name and a
value, separated by an
equals sign.
 Week 3 – Anatomy of HTML
• The <head> Element – <meta> Tag: This is an HTML tag used to
• What is the <head> Element? provide metadata (information about the
– Contains meta-information about the webpage. data) for the web page. Metadata is not
– This information is not displayed directly on the page. visible to users but gives the browser
• Common Elements in <head>: important information.
– <title>: Sets the title of the web page (displayed in – charset Attribute: This specifies the
the browser tab). character encoding for the web page.
– <meta>: Provides metadata such as character Character encoding determines how
encoding and viewport settings. characters (letters, numbers, symbols) are
– <link>: Links to external resources like stylesheets or stored and displayed.
icons.
• Example: – UTF-8: This is a type of character encoding
html that can represent almost all characters and
<head> <meta charset="UTF-8"> symbols from different languages. It's one of
<title>My Portfolio</title> the most widely used encodings on the web
<link rel="stylesheet" href="styles.css"> because it can handle multiple languages,
</head> emojis, and special characters.
• The browser knows to use UTF-8, ensuring
that all text is displayed properly, including
special characters like ñ, é, €, and even
emojis 😊.
 Week 3 – Anatomy of HTML
• 1. Bold Text • 4. Subscript
• To make text bold, you can use the <b> • To make text subscript, use the <sub>
or <strong> tag: tag:
– <p>This is <b>bold</b> text.</p> <p>This – <p>H₂O is the chemical
is <strong>strong</strong> text.</p> formula for water.</p>
• 2. Line Break • 5. Superscript
• To create a line break, use the <br> tag: • To make text superscript, use the
– <p>This is the first line.<br>This is the <sup> tag:
second line.</p> – <p>E = mc² is Einstein's
• 3. Italic Text mass-energy equation.</p>
• To make text italic, you can use the <i> • 6. White Space (Preserving Spaces)
or <em> tag: • To preserve white space, you can use
– <p>This is <i>italic</i> text.</p> <p>This the <pre> tag, which displays text
is <em>emphasized</em> text.</p> exactly as it is written, including spaces
and line breaks:
– <pre> This is an example of text with
preserved white space. </pre>
 Week 3 – Anatomy of HTML(Links)
– Links are created using <!DOCTYPE html>
<html>
the <a> tag, and the href <head>
attribute specifies the <title>Simple Links Example</title>
</head>
URL. <body>
<h1>My Favorite Websites</h1>
– Example:html <p> Visit my favorite websites: </p>
<!-- Link to Google -->
<a href="https://www.example.com">Visit <a href="https://www.google.com">Go to Google</a><br>
Example</a>
<!-- Link to Wikipedia -->
• Target Attribute: <a href="https://www.wikipedia.org">Visit
Wikipedia</a><br>
<!-- Link to YouTube -->
– Controls how the link <a href="https://www.youtube.com" target="_blank">Open
YouTube in a New Tab</a><br>
opens. For example, </body>
target="_blank" opens </html>

the link in a new tab.html

<a href="https://www.example.com"
target="_blank">Open in new tab</a>
 Week 3 – Anatomy of HTML(Links)
<!DOCTYPE html> •
•
<link> Tag:
The <link> tag is placed inside the <head> section of the HTML
<html> document. It is used to define the relationship between the current
document and an external resource.
<head> • Attributes:
• rel="stylesheet": This attribute specifies the relationship between the
<title>My Web Page</title> current document and the linked file. In this case, it indicates that the
<link rel="stylesheet" •
linked file is a stylesheet.
href="styles.css": This attribute specifies the URL of the external CSS
href="styles.css"> file. The styles.css file should be in the same directory as the HTML file
for this to work correctly.
</head> h1 {
<body> color: blue;
text-align: center;
<h1>Welcome to My Web Page</h1> }
<p>This is a simple example of using p{
font-size: 16px;
an external stylesheet.</p> color: gray;
</body> }

</html>
 Week 3 – Anatomy of HTML(White-
Spacing)
• White Spacing <p>The moon is drifting away from
Earth.</p>
• When the browser comes <p>The moon is drifting away
across two or more spaces from Earth.</p>
next to each other, it only <p>The moon is drifting away from
displays one space. Similarly Earth.</p>
if it comes across a line • White Space (Preserving Spaces)
break, it treats that as a • To preserve white space, you can
use the <pre> tag, which displays
single space too. This is text exactly as it is written,
known as white space including spaces and line breaks:
collapsing. <pre> This is an example
of text with
• You will often see that web preserved white space. </pre>
page authors take
advantage of white space
collapsing to indent their
code in order to make it
easier to follow.
 Week 3 – Anatomy of HTML(Empty
Element)
• Empty elements in HTML are elements that do not have any content between – 4. Input Field: <input>
an opening and a closing tag. They are self-closing and are used for specific
purposes. Here are some common examples:
– The <input> tag is used to create input fields in
forms (like textboxes, checkboxes, etc.).
• 1. Line Break: <br>
<input type="text" placeholder="Enter your name">
• The <br> tag is used to create a line break in the text.
– 6. Link to Stylesheet: <link>
<p>This is the first line.<br>This is the second line.</p>
– The <link> tag is used to link an external
• 2. Horizontal Rule: <hr>
stylesheet to the HTML document.
• The <hr> tag is used to insert a horizontal line, often to separate sections of <link rel="stylesheet" href="styles.css">
content.
– 7. Embed: <embed>
<p>Section 1</p>
– The <embed> tag is used to embed external
<hr> content, like a video or audio file.
<p>Section 2</p> <embed src="video.mp4" width="400" height="300">
• 3. Image: <img> • These are all empty elements because they do
• The <img> tag is used to display images. It does not have any content inside it. not have closing tags or any content between
<img src="image.jpg" alt="Sample Image"> them. They are self-contained and used to
• Note: The src attribute specifies the path to the image, and the alt attribute perform specific actions in an HTML document.
provides alternative text.
 Week 3 – Anatomy of
HTML(Quotation)
• Inline Quotation: <q>
• The <q> tag is used for short, inline quotations. It automatically adds – 4. Changes to Content
quotation marks around the text. – Deleted Text: <del>
• <p>He said, <q>This is a wonderful day.</q></p>
– The <del> tag is used to show deleted text, often with a
• Blockquote: <blockquote>
strikethrough.
• The <blockquote> tag is used for longer quotations. It is usually displayed as a
block of text, indented from the rest of the content. – <p>This is <del>incorrect</del> correct information.</p>
<blockquote cite="https://www.example.com"> "The only limit to our realization of tomorrow is our doubts of
today." - Franklin D. Roosevelt </blockquote>
– Inserted Text: <ins>
• 2. Abbreviations and Acronyms – The <ins> tag is used to show inserted or added text,
• Abbreviation: <abbr> often underlined.
• The <abbr> tag is used to indicate abbreviations and acronyms. The title – <p>This is <ins>important</ins> information.</p>
attribute provides the full form when the user hovers over it.
<p>The <abbr title="World Health Organization">WHO</abbr> was established in 1948.</p> – Highlighted Text: <mark>
• 3. Address: <address> – The <mark> tag is used to highlight text, similar to using a
• The <address> tag is used to provide contact information or address details. It marker.
is usually displayed in italic by default.
• <address> Written by John Doe.<br> Email: <a
– <p>Please pay attention to the
href="mailto:[email protected]">[email protected]</a><br> <mark>highlighted</mark> words.</p>
Address: 123 Main Street, Springfield, USA </address> • These examples illustrate how to handle various types of text
formatting and content changes in HTML. Each tag provides a
way to present content meaningfully and accessibly.
 Week 3 – Anatomy of HTML(LISTS)
• Here are examples of different types of • 2. Ordered List (<ol>)
lists in HTML, including ordered lists, • An ordered list is used when the order of the
unordered lists, and description lists:
items is important. Each item is marked with a
• 1. Unordered List (<ul>) number.
• An unordered list is used when the order <h2>Steps to Make a Sandwich</h2>
of the items does not matter. Each item is
marked with a bullet point. <ol>
<h2>Fruits</h2> <li>Gather all ingredients.</li> <li>Spread the
<ul> mayonnaise on one slice of bread.</li>
<li>Apple</li> <li>Add lettuce and tomato.</li>
<li>Banana</li> <li>Top with the second slice of bread.</li>
<li>Orange</li>
<li>Grapes</li> </ol>
</ul>
 Week 3 – Anatomy of HTML(LISTS)
• 3. Description List (<dl>) • 4. Nested List (<ul>)
• A description list is used to define • In nested unordered lists, the browser will
terms and their descriptions. Each usually change the style of the bullet point too.
term is marked with <dt> and its <ul>
description with <dd>. <li>Mousses</li>
<h2>HTML Elements</h2> <li>Pastries
<ul>
<dl> <li>Croissant</li> <li>Mille-feuille</li> <li>Palmier</li>
<dt>Coffee</dt> <li>Profiterole</li>
</ul>
<dd>A brewed drink prepared from </li>
roasted coffee beans.</dd> <li>Tarts</li>
<dd>Can be served hot or cold.</dd> </ul>

<dt>Tea</dt>
<dd>Aromatic beverage commonly
prepared by pouring hot water over
cured or fresh tea leaves.</dd>
</dl>
 Week 3 – Anatomy of HTML(Review
Questions)
• Write an explanation of how the following tags
enhance the accessibility and readability of web
content:
– <abbr> and <q>
– <blockquote> and <address>
– <del>, <ins>, and <mark>
• Instructions: For each tag or pair of tags, give a
brief description of how they work, including
scenarios where they would be particularly
useful. Explain why it's important for web
developers to use these tags correctly, focusing
on accessibility for users with disabilities (e.g.,
screen readers) and clarity for general users.
Week 4 – Creating an HTML Web Page

• Week 4
• Creating an HTML Web Page
 Week 4 – Anatomy of HTML(list with
Roman numerals)
• To create a list with • Uppercase Roman Numerals
<ol type="I">
Roman numerals instead <li>First item</li>
<li>Second item</li>
of regular numbers or <li>Third item</li>

bullets, you can use the </ol>

<li>Fourth item</li>

<ol> (ordered list) • Lowercase Roman Numerals

element with the type <ol type="i">
<li>First item</li>
attribute set to "I" for <li>Second item</li>
<li>Third item</li>
uppercase Roman <li>Fourth item</li>

numerals or "i" for </ol>

lowercase Roman
numerals.
 Week 4 – Creating an HTML Web Page

• In HTML, a form is a way to collect user input and

submit it to a server for processing.
• Forms are useful for gathering data, handling user
logins, creating surveys, and more. The form
elements include text fields, buttons, checkboxes,
and other input controls to collect various types
of data
 Week 4 – Creating an HTML Web
Page(Form)
• The <form> element is the main container for a • Key Attributes of <form>
form, and it holds various input fields and controls.
• action: Specifies the URL
• What Are Forms?
– Forms allow users to submit data to a server.
where the form data will be
– Common form elements include text fields, buttons,
sent upon submission. This
checkboxes, and radio buttons. could be a server-side script
• Example Form: like submit_form.php.
<form action="submit_form.php" method="post"> • method: Defines how the
<label for="name">Name:</label> form data is sent. The most
<input type="text" id="name" name="name"><br><br>
common methods are:
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br> – GET: Appends the form data
<input type="submit" value="Submit"> to the URL (visible in the
</form> address bar).
– POST: Sends the data in the
request body (not visible in
the URL), which is more
secure for sensitive data.
 Week 4 – Creating an HTML Web
Page(Form)
Common Form Elements Email Input (<input
1. Text Input (<input type="text">) type="email">)
Used for short text input like names, search Validates for an email format.
queries, etc.
<label for="username">Username:</label> <label for="email">Email:</label>
<input type="text" id="username" <input type="email" id="email"
name="username"> name="email">
2. Password Input (<input type="password">) 4. Radio Buttons (<input
Hides the input for sensitive data like type="radio">)
passwords.
<label for="password">Password:</label> Allows selecting only one option
<input type="password" id="password" from a set.
name="password"> <label><input type="radio" name="gender"
value="male"> Male</label>
<label><input type="radio" name="gender"
value="female"> Female</label>
 Week 4 – Creating an HTML Web
Page(Form)
• 5. Checkboxes (<input type="checkbox">) • 7. Textarea (<textarea>)
• Allows multiple selections from a list of • Used for multi-line text input,
options.
• <label><input type="checkbox"
like comments or messages.
name="subscribe" value="newsletter"> • <label
Subscribe to newsletter</label> for="message">Message:</lab
• 6. Dropdown (<select>) el> <textarea id="message"
• Provides a drop-down menu with multiple name="message"></textarea>
options.
• <label for="country">Country:</label>
• 8. Submit Button (<input
type="submit">)
• <select id="country" name="country">
– <option value="us">United States</option> • Sends the form data to the
<option value="ca">Canada</option> server.
– <option value="uk">United Kingdom</option>
• </select>
• <input type="submit"
value="Submit">
 Week 4 – Creating an HTML Web
Page(Form)
• Form Validation
• HTML5 provides basic validation for forms without
needing JavaScript.
• Required Fields: required attribute makes an input
mandatory.
– <input type="text" name="username" required>
• Pattern Matching: Use pattern to specify a regular
expression for validating input.
– <input type="text" name="zipcode" pattern="[0-9]{5}"
title="Enter a 5-digit ZIP code">
 Week 4 – Creating an HTML Web
Page(Form)
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="gender">Gender:</label> <label>
<input type="radio" name="gender" value="male"> Male</label> <label>
<input type="radio" name="gender" value="female"> Female</label><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form>
 Week 4 – Creating an HTML Web Page

• Introduction to HTML5 Semantic Elements

• What Are Semantic Elements?
– HTML5 introduced semantic elements that define the structure
of a web page in a more meaningful way.
• Common HTML5 Semantic Elements:
– <header>: Represents introductory content or navigation links.
– <footer>: Contains information about the document, such as
copyright or contact links.
– <section>: Defines sections in a document, such as chapters.
– <article>: Contains independent, self-contained content, like a
blog post or news article.
 Week 4 – Creating an HTML Web Page

• Using the <header> and <na Element

• What is the <header> Element?
– The <header> element is used for the header section of a page, usually
containing the site title, logo, and navigation links.
• Example:
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
 Week 4 – Creating an HTML Web Page

• Using the <main> element.

• The <main> element contains the main content of the
document. It should be used only once per page, and it should
not include any content that is repeated across pages, like
headers, footers, or sidebars. The <main> tag helps screen
readers quickly locate the primary content of a page.
• Example:
<main>
<h2>Welcome to Our Services</h2>
<p>We offer a variety of services to cater to your needs.</p>
</main>
 Week 4 – Creating an HTML Web Page

• Using the <section> element

• The <section> element defines thematic groupings of
content. Each section should ideally contain a single theme
or topic and may include a heading. Sections are often
used within the <main> area to structure content.
• Example:
<section>
<h3>About Us</h3>
<p>Our company focuses on delivering high-quality
products.</p>
</section>
 Week 4 – Creating an HTML Web Page

• Using the <article> element

• The <article> element is for self-contained content that can
stand on its own, like a blog post, news article, or forum
post. Each <article> could theoretically be syndicated or
distributed independently.
• Example:
<article>
<h2>Our Latest Blog Post</h2>
<p>This is an article that discusses our latest product
release.</p>
</article>
 Week 4 – Creating an HTML Web Page

• Using the <footer> Element

• What is the <footer> Element?
– The <footer> element is placed at the bottom of a
webpage and usually contains legal information, site links,
or contact details.
• Example:
<footer>
<p>&copy; 2024 My Website</p>
<a href="#privacy">Privacy Policy</a>
</footer>
 Week 4 – Creating an HTML Web Page

• Using the <section> and <article> Elements

• <section> Element:
– Used to group related content into sections.
– Example:
<section>
<h2>About Me</h2>
<p>This is a section about me.</p>
</section>
• <article> Element:
– Used for self-contained, independent content such as blog posts or news articles.
– Example:
<article>
<h2>My First Blog Post</h2>
<p>This is the content of my blog post.</p>
</article>
 Week 4 – Creating an HTML Web Page
<!DOCTYPE html>
<html lang="en"> <section id="services">
<head> <h2>Our Services</h2>
<meta charset="UTF-8"> <article>
<title>Semantic HTML5 Example</title> <h3>Service 1</h3>
<p>This service offers...</p>
</head> </article>
<body> <article>
<h3>Service 2</h3>
<header> <p>This service specializes in...</p>
<h1>Welcome to My Website</h1> </article>
</header> </section>
</main>
<nav>
<a href="#about">About Us</a> |
<a href="#services">Services</a> |
<a href="#contact">Contact</a> <footer>
</nav> <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>
<main>
<section id="about"> </body>
<h2>About Us</h2> </html>
<p>We are dedicated to providing the best service to our clients.</p>
</section>
 Week 4 – Creating an HTML Web Page

• Practical Exercise (Assignment)

• Build a Simple Web Page:
– Create a web page with:
• A <header> containing a site title and navigation links.
• A main content area with at least one <section> and one <article>.
• An image.
• A form with text input, email input, and a submit button.
• A <footer> with copyright information.
• Use HTML5 Elements:
– Incorporate semantic elements such as <header>, <footer>,
<section>, and <article>.
Week 5 – Semantic HTML

• Week 5
• Semantic HTML
 Week 5 – Semantic HTML
• Definition:
• Semantic HTML refers to the use of HTML5 elements that
clearly describe the content they contain.
• These tags give meaning to the structure of a web page, making
it easier for browsers, screen readers, and search engines to
understand the content.
• Example:
<article>
<h2>Latest News</h2>
<p>This is a self-contained section of news content.</p>
</article>
 Week 5 – Semantic HTML
• Why Semantic HTML is Important
• Enhanced Readability:
– Semantic HTML makes web pages easier to read and understand for both humans and machines.
• Accessibility:
– Semantic tags help screen readers interpret content for users with disabilities, improving website
accessibility.
• Maintainability:
– Importance: Using semantic tags makes it easier for developers to understand, update, and maintain
the code, even when they’re not familiar with the project.
• Future-Proofing with Web Standards:
– Using semantic HTML ensures that the code is aligned with web standards, making it easier to adapt
and update as the web evolves.
• Faster Development Time:
– Semantic tags eliminate the need for extra classes or comments to explain the structure, which can
speed up the development process.
 Week 5 – Semantic HTML

• Accessibility Considerations
• What is Web Accessibility?
– Web accessibility ensures that websites are usable by
people with various disabilities (e.g., vision
impairments).
• How Semantic HTML Helps:
– Tags like <nav>, <header>, and <footer> provide
better context for screen readers.
– Improves navigation and content comprehension for
all users.
 Week 5 – Semantic HTML
• SEO Considerations
• What is SEO?
– Search Engine Optimization (SEO) is the practice of improving your
website to increase its visibility in search engine results.
• How Semantic HTML Helps SEO:
– Search engines give preference to clean, well-structured, and
meaningful HTML.
– Helps crawlers understand page layout, giving better ranking based
on relevancy.
• SEO Benefits:
– Search engines use semantic HTML to better index and rank your
site.
– Clean structure improves visibility in search results.
 Week 5 – Semantic HTML
• Proper Use of <nav>
• What is the <nav> Element?
– The <nav> element defines a section of a page intended for navigation links.
• Proper Usage:
– Wrap menus or navigational elements in the <nav> tag.
– Helps users and search engines identify the navigation area.
• Example:
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
 Week 5 – Semantic HTML
• Proper Use of <aside>
• What is the <aside> Element?
– The <aside> element represents content that is indirectly related to
the main content, often used for sidebars or supplementary
information.
• Proper Usage:
– Use <aside> for content like related links, advertisements, or author
bios.
• Example:
<aside>
<h3>About the Author</h3>
<p>Jane Doe is a web developer specializing in accessibility.</p>
</aside>
 Week 5 – Semantic HTML
• Proper Use of <section>
• What is the <section> Element?
– The <section> element defines a thematic grouping of content,
typically with a heading.
• Proper Usage:
– Use <section> to logically separate content on a page, such as
chapters, sections of an article, or other related content groups.
• Example:
<section>
<h2>Services We Offer</h2>
<p>We provide web development, SEO services, and more.</p>
</section>
 Week 5 – Semantic HTML
• Proper Use of <figure>
• What is the <figure> Element?
– The <figure> element represents self-contained content, often used for
images, diagrams, or code snippets with captions.
• Proper Usage:
– Combine <figure> with the <figcaption> element to provide captions for
images or media.
• Example:
<figure>
<img src="example.jpg" alt="An example image">
<figcaption>Image of an example website layout.</figcaption>
</figure>
 Week 5 – Semantic HTML
• Example of Semantic HTML <aside> <h3>Related Links</h3>
• Putting it All Together: <ul>
<header> <li><a
<h1>My Website</h1> href="#blog">Blog</a></li>
<nav> <li><a
<a href="#home">Home</a> href="#portfolio">Portfolio</a
<a href="#services">Services</a> ></li>
<a href="#contact">Contact</a>
</nav> </ul>
</header> </aside>
<section> <footer>
<h2>About Us</h2>
<p>We are a web development <p>&copy; 2024 My
company...</p> Website</p>
</section> </footer>
 Week 5 – Semantic HTML

• Practical Exercise (Class-work)

• Create a Simple Web Page:
– Create an HTML web page that includes the following
semantic elements:
• <header> for the title and navigation.
• <nav> for links to different sections.
• <section> for main content.
• <aside> for supplementary content.
• <figure> for an image with a caption.
• <footer> with copyright information.
Week 6 – Anatomy of CSS

• Week 6
• Anatomy of CSS
 Week 6 – Anatomy of CSS
• What is CSS? • CSS allows you to create rules that control
the way that each individual box (and the
• Definition:
contents of that box) is presented.
– CSS (Cascading Style Sheets) is a • CSS Style
language used to style and – Boxes, text and specfic
layout web pages.
• BOXES: Width and height Borders (color,
– It allows control over the look width, and style) Background color and
and feel of an HTML document, images Position in the browser window.
including colors, fonts, spacing,
and layout. • TEXT: Typeface, Size, Color, Italics, bold,
uppercase, lowercase, small-caps
• Basic Example: • SPECIFIC: There are also specific ways in
body { which you can style certain elements such
background-color: lightblue; as lists, tables, and forms.
font-family: Arial, sans-serif;
}
 Week 6 – Anatomy of CSS
• CSS Syntax
• CSS Syntax Components:
– Selector: Targets the HTML element
you want to style (e.g., h1, .class,
#id).
– Property: The specific aspect of the
element you want to change (e.g.,
color, font-size).
– Value: The setting you want to
apply to the property (e.g., red,
16px).
• Example:
h1 {
color: blue;
font-size: 24px;
}
 Week 6 – Anatomy of CSS
• CSS Selectors
• Types of Selectors:
– Type Selector: Targets all instances of an HTML element
(e.g., p, h1).
– Class Selector: Targets elements with a specific class
attribute, using a dot (.) prefix (e.g., .my-class).
– ID Selector: Targets a unique element with a specific ID,
using a hash (#) prefix (e.g., #my-id).
• Example:
p{
color: gray;
}
.highlight {
background-color: yellow;
}
#main-title {
text-align: center;
}
 Week 6 – Anatomy of CSS
Html Code CSS Code
*{
font-family: Arial, Verdana, sans-serif;}
h1 {
font-family: "Courier New", monospace;}
i{
<h1>Potatoes</h1> color: green;}
i{
color: red;}
<p id="intro">There are b{
color: pink;}

<i>dozens</i> pb{
color: blue !important;}
pb{

of different color: violet;}

p#intro {
font-size: 100%;}

<b>potato</b> varieties.</p> p{
font-size: 75%;}

<p>They are usually described

as early, second early and
maincrop potatoes.</p>
 Week 6 – Anatomy of CSS
• Inline, Internal, and External Style sheets
• Inline Styles:
– CSS is applied directly within an HTML element using the style
attribute.
<h1 style="color: green;">Hello World</h1>
• Internal Styles:
– CSS is written inside the <style> tag within the <head> section of an
HTML document.
<style> body { background-color: lightgray; } </style>
• External Styles:
– CSS is written in a separate file with a .css extension, and linked to the
HTML document using a <link> tag.
– Example:
<link rel="stylesheet" href="styles.css">
 Week 6 – Anatomy of CSS
• Color /* color name */
• The color property allows you to specify
the color of text inside an element. You h1 {
can specify any color in CSS in one of
three ways: color: DarkCyan;}
• rgb values /* hex code */
– These express colors in terms of how much
red, green and blue are used to make it up.
For example: rgb(100,100,90) h2 {
• hex Codes color: #ee3e80;}
– These are six-digit codes that represent the
amount of red, green and blue in a color,
preceded by a pound or hash # sign. For
/* rgb value */
•
example: #ee3e80
Color names
p{
– There are 147 predefined color names that color: rgb(100,100,90);}
are recognized by browsers. For example:
DarkCyan
 Week 6: Anatomy of CSS
Different units used in CSS and HTML
 Week 6: Anatomy of CSS
Different units used in CSS and HTML • Pixels are relative to
the resolution of the
screen, so the same
type size will look
larger when a screen
has a resolution of
800x600 than it
would when it is
1280x800.
 Week 6: Anatomy of CSS
Understanding Font Format a:link {
color: deeppink;
.credits { text-decoration: none;}
font-weight: bold;
font-style: italic;
a:visited {
text-transform: capitalize;
text-decoration: underline; color: black;}
}
a:hover {
p{ color: deeppink;
line-height: 1.4em;} text-decoration: underline;}

h1, h2 { a:active {
text-transform: uppercase; color: darkcyan;}
letter-spacing: 0.2em;
text-align: left;}

p.one {
background-color: #eeeeee;
color: #666666;
text-shadow: 1px 1px 0px #000000;}
 Week 6: Anatomy of CSS
Understanding Font Format <body>
<h1>Briards</h1>
<h2>A Heart wrapped in fur</h2>
<p class="intro">The <a class="breed"
href="http://en.wikipedia.org/wikiBriard"> briard</a>, or berger
input { de brie, is a large breed of dog traditionally used as a
padding: 6px 12px 6px 12px; border: herder and guardian of sheep.</p>
1px solid #665544; <h3>Breed History</h3>
color: #ffffff;} <p>The briard, which is believed to have originated in France, has been
bred for
centuries to herd and to protect sheep. The breed was used by the
input.submit:hover { background-color: #665544;} French Army as sentries, messengers and to search for wounded
soldiers because of its fine sense of hearing. Briards were used
in the First World War almost to the point of
input.submit:active { background-color: chocolate;} extinction. Currently the population of briards is slowly recovering.
Charlemagne, Napoleon, Thomas Jefferson and Lafayette all
owned briards.</p>
input.text { <p class="credits">by Ivy Duckett</p><br><br>
color: #cccccc;} <input type=“text” name=“name”/>
<input type=”submit” class=“submit”/>
input.text:focus { </body>
</html>
color: #665544;}
 Week 6 – Anatomy of CSS
• Understanding the CSS Box Model
• What is the Box Model?
– Every HTML element is considered as a rectangular box. The CSS Box
Model consists of margins, borders, padding, and the actual content.
• Components of the Box Model:
– Content: The actual content inside the element (e.g., text or image).
– Padding: Space between the content and the border.
– Border: A line surrounding the padding (optional).
– Margin: Space outside the border, separating the element from other
elements.
• Example:
• div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
• }

Diagram of the CSS Box Model:

Content (e.g., text) in the middle.
Padding surrounds the content.
Border encloses the padding.
Margin separates the element from surrounding elements.
 Week 6 – Anatomy of CSS
• HTML Code(Width and HTML Code(Overflow)

height) <h2>Fender Stratocaster</h2>

<p class="one">The Fender Stratocaster or "Strat"
<div> is one of the most popular electric guitars of all time, and its
<p>The Moog company pioneered the design has been copied by many guitar makers. It was
commercial manufacture of modular voltage- designed by Leo... </p>
controlled analog synthesizer systems in the <h2>Gibson Les Paul</h2>
early 1950s.</p> <p class="two">The Gibson Les Paul is a solid body electric
guitar that was first sold in 1952. The Les Paul was
</div> designed by Ted McCarty... </p>
• CSS Code CSS Code
. div.box {
height: 300px; p.one {
width: 300px;
background-color: #bbbbaa;} overflow: hidden;}
p{
height: 75%; p.two {
width: 75%;
background-color: #0088dd;} overflow: auto;
Width: 200px;
Height: 200px}
Week 6 – Anatomy of CSS
HTML Code
<p class="one">Hohner's "Clavinet"
is essentially an
electric clavichord.</p>
<p class="two">Hohner's "Clavinet"
is essentially an
electric clavichord.</p>
<p class="three">Hohner's "Clavinet" is essentially an electric clavichord.</p>
CSS Code
p.one {
border-width: 2px;}
p.two {
border-width: thick;}
p.three {
border-width: 1px 4px 12px 4px;}
 Week 6 – Anatomy of CSS
HTML Code(Border Style)
<p class="one">Wurlitzer Electric Piano</p> HTML Code(Border color)
<p class="two">Wurlitzer Electric Piano</p> <p class="one">The ARP Odyssey was introduced in 1972.</p>
<p class="three">Wurlitzer Electric Piano</p> <p class="two">The ARP Odyssey was introduced in 1972.</p>
<p class="four">Wurlitzer Electric Piano</p> CSS Code
<p class="five">Wurlitzer Electric Piano</p>
p.one {
<p class="six">Wurlitzer Electric Piano</p>
<p class="seven">Wurlitzer Electric Piano</p> border-color: #0088dd;}
<p class="eight">Wurlitzer Electric Piano</p> P.two {
CSS Code Border-color: #bbbbaa #111111 #ee3e80 #0088dd;}
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
 Week 6 – Anatomy of CSS
HTML Code(Border Style) HTML Code(Border Style)
<body> <h1>The Complete Poems</h1> <h2>Emily Dickinson</h2>
<p>Analog synthesizers are often said to have a "warmer" sound than their <ol>
digital counterparts.</p> <li>Life</li>
<p class="example">Analog synthesizers are often said to have a "warmer" sound than <li>Nature</li>
their digital counterparts.</p> <li>Love</li>
</body> <li>Time and Eternity</li>
CSS Code <li>The Single Hound</li>
body { </ol>
text-align: center;} CSS Code
p{ ol {
width: 300px; list-style-type: lower-roman;} decimal, decimal-leading-zero, lower-alpha, upper-alpha,
padding: 50px; lower-roman, upper-roman
border: 20px solid #0088dd;} ul {
p.example { list-style-type: lower-roman;} none, disc, circle, square
margin: 10px auto 10px auto; ul {
text-align: left;} list-style-image: url("images/star.jpeg");}
li {
margin: 10px 0px 0px 0px;}
 Week 6 – Anatomy of CSS
HTML Code(In-line block display)
<ul> HTML Code(Hidden Visibility)
<li>Home</li> <ul>
<li>Products</li> <li>Home</li>
<li class="coming-soon">Services</li> <li>About</li> <li>Products</li>
<li>Contact</li> <li class="coming-soon">Services</li> <li>About</li>
</ul>
<li>Contact</li>
CSS Code
</ul>
li {
display: inline; CSS Code
margin-right: 10px;} li {
li.coming-soon { display: inline; margin-right: 10px;}
display: none;} li.coming-soon { visibility: hidden;}
 Week 6 – Anatomy of CSS
HTML Code(Rounded corners)
<p>Pet Sounds featured a number of unconventional instruments such as bicycle bells, • CSS3 introduces the ability to create rounded corners on any box,
buzzing organs, harpsichords, flutes, Electro-Theremin, dog whistles, trains, using a property called border-radius. The value indicates the size
Hawaiian-sounding string instruments, Coca-Cola cans and barking dogs.</p>
of the radius in pixels. Older browsers that do not support this
CSS Code
property will show a box with right-angled corners.
p{
border: 5px solid #cccccc; • The -moz-border-radius and -webkit-border-radius properties are
padding: 20px; not in the CSS specification. However, they are used in some
width: 275px; versions of Chrome, Firefox, and Safari to offer early support for
text-align: center; this style (and therefore can be used to achieve this effect in more
border-radius: 10px; browsers).
-moz-border-radius: 10px;
• You can specify individual values for each corner of a box using:
-webkit-border-radius: 10px;}
– border-top-right-radius
– border-bottom-right-radius
– border-bottom-left-radius
– border-top-left-radius
• You can also use a shorthand of these four properties (in
clockwise order: top, right, bottom, left). For example:
• border-radius: 5px, 10px, 5px, 10px;
 Week 6 – Anatomy of CSS
CSS Code
input { HTML Code(Bulleting Style)
font-size: 120%; <input type="text" name=“email" id=“email"><br />
color: #5a5854;
<input type="text" name=“twitter" id=“twitterl"></p>
background-color: #f2f2f2;
border: 1px solid #bdbdbd; <input type="text" name=“web" id=“web"></p>
border-radius: 5px;
padding: 5px 5px 5px 30px;
</body>
background-repeat: no-repeat;
background-position: 8px 9px; </html>
display: block;
margin-bottom: 10px;}
input:focus {
background-color: #ffffff;
Input Styling
border: 1px solid #b1e1e4;}
input#email {
background-image: url("images/email.jpeg");}
input#twitter {
background-image: url("images/twitter.jpeg");}
input#web {
background-image: url("images/web.jpeg");}
 Week 6 – Anatomy of CSS
CSS Code
fieldset { HTML Code(Bulleting Style)
width: 310px; <form action="http://www.example.com/form.php" method="get">
margin-top: 20px;
<fieldset>
border: 1px solid #d6d6d6; background-color: #ffffff; line-height: 1.6em;}
legend { <legend>Register your interest</legend>
font-style:italic; <p><label class="title" for="name">Your name:</label>
color:#666666;}
<input type="text" name="name" id="name"><br />
input[type="text"] {
width: 120px; <label class="title" for="email">Your email:</label>
border: 1px solid #d6d6d6; padding: 2px; <input type="text" name="email" id="email"></p>
outline: none;}
<p><label for="location" class="title">Your closest center:</label>
input[type="text"]:focus, input[type="text"]:hover {
<select name="location" id="location">
background-color: #d0e2f0; border: 1px solid #999;}
input[type="submit"] { border: 1px solid #006633; background-color: #009966; color: <option value="ny">New York</option>
#FFFFFF; <option value="il">Chicago</option>
border-radius: 5px; padding: 5px;
margin-top: 10px;} input[type="submit"]:hover {
<option value="ca">San Francisco</option>
border: 1px solid #006633; </select></p>
<span class="title">Are you a member?</span>
<label><input type="radio" name="member" value="yes" /> Yes</label>
<label><input type="radio" name="member" value="no" />
No</label></p>
</fieldset>
<div class="submit"><input type="submit" value="Register" /></div>
</form>
</body>
</html>
 Week 6 – Anatomy of CSS

• Practical Exercise (ASSIGNMENT)

• Create a Basic Web Page:
– Create a simple HTML page and use CSS to style it.
– Experiment with:
• Adding different selectors (element, class, ID).
• Using inline, internal, and external CSS.
• Applying the Box Model with different padding,
margins, and borders.