Scribd
Upload
20 views

HTML Biginers Task

Uploaded by

Antony Rukwaro
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views

HTML Biginers Task

Uploaded by

Antony Rukwaro
Copyright
© © All Rights Reserved
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