Scribd
Upload
4 views3 pages

HTML Structure and CSS Basics Guide

The document explains HTML elements such as <header>, <nav>, <img>, ordered and unordered lists, as well as CSS basics including Flexbox, padding, margin, and border. It provides examples for each HTML tag and CSS property to illustrate their usage. The content is aimed at helping users understand web layout and design principles.

Uploaded by

Mujahid Usman
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
4 views3 pages

HTML Structure and CSS Basics Guide

The document explains HTML elements such as <header>, <nav>, <img>, ordered and unordered lists, as well as CSS basics including Flexbox, padding, margin, and border. It provides examples for each HTML tag and CSS property to illustrate their usage. The content is aimed at helping users understand web layout and design principles.

Uploaded by

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

HTML Header, Navigation, Images and Lists

1. Header Tag (<header>)

 The <header> element is used to define the top section of a webpage or a section within
it.
 It typically contains navigation menus, logos, or introductory content like a title or
tagline.
 Example:

<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>

2. NAVIGATION TAG (<NAV>)

 The <nav> tag is used to group navigation links.


 It helps users move through the website and should only contain major navigational blocks.
 Example:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</nav>

3. IMAGE TAG (<IMG>) IN HEADER

 You can include an image (e.g., a logo) inside the <header> tag for branding or visual
enhancement.

<img src="url" alt="alternatetext">

<img src="pic_trulli.jpg" alt="Italian Trulli">


4.. 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:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML UNORDERED LISTS

The HTML <ul> tag defines an unordered (bulleted) list.

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

CSS Basics: Flexbox, Padding, Margin, and Border

1. FLEXBOX

 Flexbox is a CSS layout module designed to help organize and align items within a container,
making responsive design easier.
 It allows elements to be arranged in rows or columns and aligned properly without using floats
or positioning.

Basic Flexbox Properties:

 display: flex;: Activates Flexbox on a container.


 justify-content: Aligns items horizontally (left, center, right, space-between).
 align-items: Aligns items vertically.

2. PADDING

 Padding adds space inside an element, between its content and its border.
 Example

.container { padding: 20px; }


.

3. MARGIN

 Margin adds space outside an element, between the element’s border and surrounding
elements.
 Example

.box {

margin: 10px;

4. BORDER

 Border defines the edge of an element and can be customized with width, color, and style.

Example:

.box {

border: 2px solid black;

You might also like