Scribd
Upload
33 views

HTML Biginers Task

Uploaded by

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

HTML Biginers Task

Uploaded by

Antony Rukwaro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML & CSS

LIST ITEMS

1. Create an HTML file with the appropriate structure, including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.

2. Ordered List (OL):

 Inside the <body> tag, create an ordered list using the <ol> tag.

 Include at least three list items <li> within the ordered list.

 Add relevant information to each list item, such as your favorite books, movies, or
places to visit.

3. Unordered List (UL):

 Create an unordered list using the <ul> tag below the ordered list.

 Include at least three list items <li> within the unordered list.

 Add different information to each list item, such as your hobbies, goals, or favorite
foods.

Create a webpage Task

Description: Your task is to create a simple personal webpage for a fictional character named Jane
Doe. The webpage should include some basic information about Jane, such as her name, interests,
and a brief introduction, include a navigation menu that allows visitors to easily navigate between
different sections of the webpage

Use HTML and CSS to implement the webpage.

Requirements:

1. HTML Structure:

 Create an HTML file with the appropriate structure, including the <!DOCTYPE html>
declaration, <html>, <head>, and <body> tags.

2. Page Content:

 Include a heading with Jane Doe's name.

 Add a paragraph or two describing Jane's interests and hobbies.

 Include a section with a brief introduction about Jane.

3. Styling:

 Use CSS to style the webpage.

 Choose appropriate fonts, colors, and sizes for the text.

 Add some padding and margins to create spacing between elements.

 Experiment with CSS properties like background color, borders, and text alignment
to enhance the appearance of the webpage.

CSS
HTML & CSS

1. CSS:
Colon (:): In CSS, colons are used to separate the property name from its corresponding value within a
declaration.

 Within the <head> section of your HTML file, add a <style> tag to LINK LATER.

 Use selectors to target specific HTML elements. For example, to style a <h1>
heading, use the selector h1.

 Apply CSS properties and values to change the appearance of the selected elements.
For instance, to change the font color of a heading, use the property color and
specify a color value like red.

 Test your styles by refreshing the webpage in a browser and checking the changes.

2. Basic CSS Properties:

 color: Change the text color. For example: color: blue;

 background-color: Set the background color of an element. For example:


background-color: yellow;

 font-family: Define the font type for text. For example: font-family: Arial, sans-serif;

 font-size: Specify the size of the text. For example: font-size: 16px;

 text-align: Align text within its container. For example: text-align: center;

 padding: Add space inside an element's boundary. For example: padding: 10px;

 margin: Create space around an element. For example: margin: 20px;

 border: Add a border around an element. For example: border: 1px solid black;

3. Class and ID Selectors:

 Use classes to target specific elements for styling.

 Add a class attribute to HTML elements, such as <h1 class="my-heading">, and then
define the styles for that class in CSS using a dot (.) before the class name. For
example: .my-heading { color: red; }

4. Applying Multiple Styles:

 You can apply multiple styles to an element by separating them with semicolons. For
example: font-family: Arial, sans-serif; color: #333333;

HINT FOR NAV

1. Use the <nav> element to wrap the navigation menu:

<nav> <!-- Menu items will go here -->

</nav>

2. Use an unordered list <ul> to create the menu items:

<nav>
HTML & CSS

<ul>

<!-- Menu items will go here -->

</ul>

</nav>

3. Each menu item should be a clickable link:


The <a> tag in HTML is used to create a hyperlink which allows you to link to other web pages

<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>

4. Apply CSS styles to the navigation menu:

nav { background-color: light gray; padding: 10px; }

nav ul { list-style-type: none; margin: 0; padding: 0; }

nav li { display: inline; margin-right: 10px; }

nav li a { text-decoration: none; color: dark gray; }

nav li a:hover { text-decoration: underline; }

You might also like