Site icon FahmidasClassroom

Understanding the basic of HTML and CSS

Fahmida Yesmin
Lab1

HTML Basics:

HTML5 is the fifth and latest version of the Hyper Text Markup Language (HTML), designed to structure and present content on the web effectively. Its primary purpose is to provide a standardized framework for creating modern, interactive, and responsive websites and applications. 

Additionally, HTML5 improves cross-platform compatibility, enabling seamless functionality across various devices, including desktops, tablets, and smartphones. Its support for offline storage via Web Storage (local and session storage) and advanced APIs, like Geolocation and Canvas, empowers developers to create dynamic and engaging user experiences. HTML5 also emphasizes performance, scalability, and ease of use, making it a cornerstone for modern web development. Its versatility ensures the web remains innovative and accessible for all users.

Basic structure of HTML:

 

<!DOCTYPE html>

<html>
   <head>
       <title>Page Title</title>
   </head>
   <body>
       <!-- Page content goes here -->
   </body>
</html>

Common HTML Tags

Examples of HTML tags for headings from H1 to H6:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Each heading tag represents a different level of importance, with <h1> being the most important (usually the title of the page) and <h6> being the least important.

Example of the <p> tag in HTML:

<p>This is a paragraph of text. It is used to display content in a block-level format.</p>

The <p> tag defines a paragraph, and the content inside it will be displayed with some space above and below it, separating it from other content.

Example of the <img> tag in HTML:

<img src="image.jpg" alt="A description of the image" width="500" height="300">

Example of the <a> tag in HTML:

<a href="https://www.example.com" target="_blank">Click here to visit Example.com</a>

Examples of different types of HTML list tags:

Unordered List (<ul>):

<ul>

<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>

</ul>

Ordered List (<ol>):

<ol>

<li>First item</li>
<li>Second item</li>
<li>Third item</li>

</ol>

Description List (<dl>):

<dl>

<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A style sheet language for describing the presentation of a document written in HTML.</dd>

</dl>

In these examples, <ul> is for unordered lists, <ol> is for ordered lists, and <dl> is for definition lists where <dt> defines the term and <dd> provides the description.

Example of an HTML <table> tag:

<table border="1">

    <caption>Employee Information</caption>
    <thead>
        <tr>
           <th>Name</th>
           <th>Position</th>
           <th>Salary</th>
        </tr>
    </thead>

    <tbody>

         <tr>
           <td>John Doe</td>
           <td>Manager</td>
           <td>$5000</td>
         </tr>

         <tr>
           <td>Jane Smith</td>
           <td>Developer</td>
           <td>$4500</td>
         </tr>

         <tr>
           <td>Sam Johnson</td>
           <td>Designer</td>
           <td>$4000</td>
         </tr>
   </tbody>

</table>

Explanation:

This example creates a table with 3 columns (Name, Position, Salary) and 3 rows of employee data.

Here’s an example of an HTML <form> tag:

<form action="/submit_form" 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="message">Message:</label>
    <textarea id="message" name="message" rows="4" cols="50" required></textarea>
    <br><br>
    <input type="submit" value="Submit">
</form>

Explanation:

This form will collect the user’s name, email, and a message, then submits the data when the “Submit” button is clicked.

Semantic HTML5 Tags

Semantic tags are HTML elements that clearly describe their meaning both to the browser and to developers. Examples include <header>, <footer>, <article>, <section>, <nav>, and <main>. These tags play a crucial role in both accessibility and SEO (Search Engine Optimization) for several reasons:

Improved Accessibility:

Semantic tags help screen readers and other assistive technologies understand the structure of the page. By using meaningful tags, content becomes easier to navigate for users with disabilities, such as those who rely on screen readers or keyboard navigation.

Enhanced SEO (Search Engine Optimization):

Search engines use semantic tags to better understand the content and structure of a web page, improving its visibility in search results.

Better User Experience (UX):

Semantic tags lead to a more organized and readable page structure, which enhances the user experience. When content is well-organized and labeled, it’s easier for both users and search engines to understand the flow of the content.

For example, <main> tags help identify the primary content of the page, and <aside> can clearly separate supplementary content. These cues help users focus on relevant content quickly and easily.

Using semantic tags benefits both accessibility and SEO by:

Some uses of each HTML Semantic tags:

1. <header>:

This element is used to define the header section of a webpage or a specific section of a page. It typically contains introductory content, such as the website’s logo, navigation links, and sometimes a search bar or title. It helps provide context for the rest of the page or section.

<header>

<h1>My Website</h1>
<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

</nav>

</header>

2. <footer>:

The `<footer>` element defines the footer of a page or section. It usually contains copyright information, contact details, privacy policy links, or other relevant legal or administrative content. The footer generally appears at the bottom of the page.

<footer>

<p>&copy; 2025 My Website. All rights reserved.</p>
<a href="#">Privacy Policy</a>

</footer>

3. <section>:

This element is used to group related content within a page. A `<section>` typically has its own heading and represents a distinct part of the page. It helps organize content into logical sections for better readability and accessibility.

<section>

<h2>About Us</h2>
<p>We are a web development company...</p>

</section>

4. <article>:

The `<article>` element represents a self-contained piece of content that can stand on its own. Examples include blog posts, news articles, or forum posts. It is often used for content that could be syndicated or reused in different contexts.

<article>

<h2>Breaking News</h2>
<p>Today’s latest news is...</p>

</article>

5. <nav>:

– This element defines a section of navigation links. It is used to group and provide easy access to various pages or sections of the site. It’s typically used for primary navigation menus but can also contain links to other important parts of the website.

<nav>

<ul>

     <li><a href="#">Home</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Contact</a></li>

</ul>

</nav>

These elements help create a structured, semantic layout, improving the usability of a website and helping search engines understand the content better.

Example of tags together:

<header>
   <h1>My Web Page</h1>
</header>

<nav>
   <a href="#section1">Section 1</a>
   <a href="#section2">Section 2</a>
</nav>

<section id="section1">

    <article>
       <h2>Article Title</h2>
       <p>Content here.</p>
    </article>

</section>

<footer>
    <p>&copy; 2025 My Website</p>
</footer>

CSS Basics

The objective of learning CSS3 is to gain the skills needed to create modern, visually appealing, and responsive websites. CSS3 enhances the presentation of web content by providing powerful styling options, such as advanced layouts, animations, and transitions. This allows developers to design websites that are not only functional but also visually engaging.

One of the main advantages of CSS3 is its ability to create responsive designs, ensuring that websites adapt seamlessly to different screen sizes and devices, improving user experience. CSS3 also enables the use of custom fonts, shadows, gradients, and other design elements that enhance the overall aesthetics of a website.

Additionally, CSS3 helps in separating content from presentation, making websites easier to maintain and manage. By mastering CSS3, developers can ensure that their websites are compatible with modern web standards, improve accessibility, and stay ahead in the constantly evolving field of web development.

Types of CSS:

Inline CSS: Directly inside HTML tags.

<p style="color: red;">This is red text.</p>

Internal CSS: Inside <style> tags in the <head>.

<style>

p {
     color: blue;
}

</style>

External CSS: Linking a .css file.

<link rel="stylesheet" href="styles.css">

Explain why external CSS is the most efficient.

Selectors, Properties, and Values

Selectors: Target elements (e.g., p, .class, #id).

Properties and Values: Define styles (e.g., color: red;, font-size: 16px;).

Example:

h1 {

color: green;
font-size: 24px;

}

.button {

background-color: blue;
color: white;
padding: 10px;

}

Box Model

The CSS3 box model is a fundamental concept used to define and structure the layout of elements on a webpage. It consists of four areas: content, padding, border, and margin, which collectively determine the size and spacing of an element. The box model allows designers to control element dimensions, manage spacing between elements, and create visually appealing layouts. By adjusting properties like padding for internal spacing, borders for emphasis, and margins for external spacing, the box model ensures precise alignment and spacing. It plays a vital role in responsive design, enabling consistent behavior across various screen sizes and devices.

The four parts of the box model:

Content: The actual text/image.

Padding: Space between content and border.

Border: The edge around the padding.

Margin: Space between the element and others.

Example:

div {
border: 2px solid black;
padding: 10px;
margin: 15px;
}

Lab Exercise

Task: Create a personal profile page using HTML and CSS.

HTML Requirements:

Use headings for the name and title.
Add a profile picture using <img>.
Include a short bio in a paragraph.
Create a list of hobbies or skills.
Add links to social media or contact info.

CSS Requirements:

Apply styles to the headings, paragraphs, and list items.
Use the box model to add padding, borders, and margins.
Add a background color or gradient to the page.
Use media queries to adjust styles for smaller screens.

Recap Key Points:
The structure of an HTML document.
Styling with CSS and the importance of the box model.

Exit mobile version