FahmidasClassroom

Learn by easy steps

You Are Here

Lab1
Web Programming

Understanding the basic of HTML and CSS

no Comments

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

  • Headings: <h1> to <h6>

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.

  • Paragraphs: <p>

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.

  • Images: <img src=”image.jpg” alt=”description”>

Example of the <img> tag in HTML:

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

    • src: Specifies the path to the image file.
    • alt: Provides alternative text for the image if it can’t be displayed.
    • width and height: Define the size of the image (optional).
  • Links: <a href=”https://example.com”>Visit Example</a>

Example of the <a> tag in HTML:

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

    • href: Specifies the URL the link points to.
    • target=”_blank”: Opens the link in a new tab (optional).
    • The text inside the <a> tag (“Click here to visit Example.com”) is what the user will see and click on.
  • Lists: Ordered <ol> and Unordered <ul>

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.

  • Tables: Rows <tr> and cells <td>

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:

  • <table>: Defines the table itself.
  • <caption>: Provides a title for the table.
  • <thead>: Contains the header row(s).
  • <tr>: Defines a row within the table.
  • <th>: Represents a header cell (bold and centered by default).
  • <td>: Represents a standard data cell.

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

  • Forms: <form> with <input> fields

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:

  • : Defines the form element.
    • action: Specifies where to send the form data when the form is submitted.
    • method: Defines the HTTP method (in this case, “post”) used to send the data.
  • <label>: Specifies a label for the input field. The for attribute associates the label with an input field.
  • <input>: Defines various types of input fields (like text, email, etc.).
  • <textarea>: Defines a multi-line text input.
  • <input type=”submit”>: A button that submits the form.

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.

  • Screen readers can interpret semantic tags and provide more meaningful and organized information. For example, a screen reader can easily recognize the <header> as the page’s top section or the <nav> as the navigation area, helping users quickly navigate to relevant sections.
  • Keyboard navigation: Users with motor disabilities often rely on the keyboard for navigation. Semantic tags give a clear structure to the page, making it easier for them to jump between key areas (like the header, main content, and footer) using shortcuts.

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.

  • Content Relevance: Search engines like Google can distinguish the importance of different content on the page. For instance, content wrapped in <article> or <section> tags is understood as distinct sections or articles, and content inside <header> is seen as introductory or navigational.
  • Better Indexing: By clearly marking up content, semantic tags help search engines index the page more effectively. This leads to better rankings because search engines can more accurately categorize the content.
  • Improved Readability: Proper use of semantic tags improves the readability of the page’s structure. This makes it easier for search engines to understand relationships between elements, leading to higher quality 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:

  • Providing structure and clarity for assistive technologies, improving usability for people with disabilities.
  • Helping search engines understand and rank your content more effectively, boosting search visibility. By following best practices for semantic HTML, you ensure a better experience for all users, while enhancing the performance of your site on search engines.

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.