HTML and CSS tutorial for beginners

 

This HTML and CSS tutorial is designed for beginners who want to learn the basics of web development. It covers the fundamental concepts of HTML and CSS, including how to structure an HTML document, apply CSS styles, and create responsive layouts.

Objectives:

  • Understand the role of HTML and CSS in web development
  • Set up a local development environment and install a text editor
  • Create an HTML document and apply basic tags and elements
  • Style an HTML document with CSS, including text, backgrounds, and layout
  • Learn intermediate techniques for working with HTML and CSS.

What are HTML and CSS?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the fundamental technologies for building websites and web applications. HTML is a markup language that is used to structure and organize content on the web, while CSS is a style sheet language that is used to control the appearance and formatting of that content.

Why learn HTML and CSS?

There are several reasons why learning HTML and CSS is important for anyone interested in web development:

  1. HTML and CSS are the foundation of the web, and a basic understanding of these technologies is necessary for building any type of website or web application.
  2. HTML and CSS are easy to learn and use, and there are many resources available for learning these technologies.
  3. Knowing HTML and CSS allows you to have complete control over the structure and appearance of your web pages, and enables you to create custom designs that are tailored to your needs.
  4. These skills are highly sought after in the job market, and a strong foundation in HTML and CSS can open up a wide range of career opportunities in the tech industry.

Setting up your development environment

Before you can start building web pages with HTML and CSS, you need to set up a development environment on your computer. This involves installing a text editor and setting up a local development environment.

Installing a text editor

A text editor is a program that is used for writing and editing code. There are many different text editors available, and some popular options include Sublime Text, Atom, and Visual Studio Code. When choosing a text editor, consider the features that are important to you, such as syntax highlighting, code completion, and built-in debugging tools.

Setting up a local development environment

In order to test your HTML and CSS code, you will need to set up a local development environment on your computer. This involves installing a web server, such as Apache or Nginx, and configuring it to serve your web pages. You can also use tools like XAMPP or MAMP to set up a local development environment with a web server, database, and other tools. Once you have set up your local development environment, you can create HTML and CSS files and test them in your web browser.

HTML basics

In this section, you will learn the basics of HTML, including the structure of an HTML document and common tags and elements.

Understanding the structure of an HTML document

An HTML document consists of a series of elements that are nested inside one another. The root element of an HTML document is the HTML element, which contains two main sections: the head element and the body element. The head element contains metadata about the document, such as the title and any external resources that are linked to the page, while the body element contains the actual content of the page.

Here is a simple example of the structure of an HTML document:

<!DOCTYPE html>

<html>

<head>

  <title>My Page</title>

</head>

<body>

  <h1>Welcome to my page</h1>

  <p>This is where I share my thoughts and ideas.</p>

</body>

</html>

Here is a breakdown of the different parts of this HTML document:

  1. <!DOCTYPE html>: This line tells the web browser that the document is an HTML document.
  2. <html>: This is the root element of the HTML document. All other elements are contained within this element.
  3. <head>: This element contains information about the document, such as the title and any linked resources (such as stylesheets).
  4. <title>: This element specifies the title of the document, which is displayed in the browser's title bar or tab.
  5. <body>: This element contains the content of the HTML document, such as headings, paragraphs, and images.

Basic HTML tags and elements

HTML uses tags to denote different types of content. Some common tags include:

  • p: Used to create a paragraph of text
  • h1, h2, h3, etc.: Used to create headings
  • a: Used to create a hyperlink
  • img: Used to insert an image
  • div: Used to group elements together and apply styles

When adding a tag, you will start and close it with less than (<) and greater than (>) symbols.

Here are some code examples using the HTML tags you listed:

<!-- This is a paragraph tag -->

<p>This is a paragraph of text. It is enclosed within the 'p' element.</p>


<!-- These are heading tags -->

<h1>This is a level 1 heading</h1>

<h2>This is a level 2 heading</h2>

<h3>This is a level 3 heading</h3>


<!-- This is a hyperlink tag -->

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


<!-- This is an image tag -->

<img src="image.jpg" alt="A description of the image">


<!-- This is a div tag -->

<div>

  <p>This paragraph is contained within a 'div' element.</p>

  <p>So is this paragraph.</p>

</div>

Adding text, links, and images

To add text to an HTML document, you can simply type it between the opening and closing tags of the appropriate element. For example, to create a paragraph of text, you would use the p tag. You can also use the <a> tag to create a hyperlink to another web page, and the <img> tag to insert an image.

Here is an example of adding text, links, and images to an HTML document using different HTML tags:

<!-- This is a paragraph tag with some text inside -->

<p>Welcome to my website! Here you will find information about my interests and hobbies.</p>


<!-- This is a hyperlink tag that links to another web page -->

<p>For more information, you can visit <a href="https://www.akanne.org">Akanne Academy.com</a>.</p>


<!-- This is an image tag that inserts an image -->

<img src="image.jpg" alt="A description of the image">

Creating lists and tables

HTML also provides tags for creating lists and tables. There are two types of lists: ordered lists (numbered) and unordered lists (bulleted). To create a list, you can use the ol or ul tags, and then nest li (list item) elements inside the list element. To create a table, you can use the table tag and then use the tr (table row), th (table header), and td (table cell) tags to create the rows, columns, and cells of the table.

Here is an example of creating lists using HTML tags:

<!-- This is an ordered list -->

<ol>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ol>


<!-- This is an unordered list -->

<ul>

  <li>Item 1</li>

  <li>Item 2</li>

  <li>Item 3</li>

</ul>

Here is an example of creating tables using HTML tags:

<!-- This is a table -->

<table>

  <tr>

    <th>Column 1</th>

    <th>Column 2</th>

  </tr>

  <tr>

    <td>Row 1, Cell 1</td>

    <td>Row 1, Cell 2</td>

  </tr>

  <tr>

    <td>Row 2, Cell 1</td>

    <td>Row 2, Cell 2</td>

  </tr>

</table>

CSS basics

CSS (Cascading Style Sheets) is a style sheet language that is used to control the appearance and formatting of an HTML document. CSS allows you to apply styles, such as colors, fonts, and layout, to your HTML content, and provides a powerful way to customize the look and feel of your web pages.

Understanding the role of CSS in web design

CSS plays a critical role in web design, as it is used to define the visual appearance of a web page. With CSS, you can control things like the font, color, and layout of your HTML content, and create custom styles that are tailored to your needs.

Here is an example of how CSS can be used to style an HTML document:

<!-- This is an HTML document with some basic content -->

<!DOCTYPE html>

<html>

<head>

  <title>My Page</title>

</head>

<body>

  <h1>Welcome to my page</h1>

  <p>This is where I share my thoughts and ideas.</p>

</body>

</html>


<!-- This is a CSS stylesheet that defines some custom styles for the HTML document -->

<style>

  body {

    font-family: Arial, sans-serif;

    background-color: lightblue;

  }

  h1 {

    color: navy;

  }

  p {

    font-size: 18px;

  }

</style>

In this example, the CSS stylesheet is used to set the font of the body to Arial, the background color of the body to light blue, the color of the h1 headings to navy, and the font size of the paragraphs to 18px.

How to apply CSS styles to your HTML

There are several ways to apply CSS styles to your HTML content. One way is to include a style element in the head of your HTML document and define your styles within it. Another way is to create a separate CSS file and link to it from your HTML document using the link element. You can also apply styles directly to specific elements using the style attribute.

Here are some code examples showing different ways to apply CSS styles to your HTML:

Include a style element in the head of your HTML document

<!DOCTYPE html>

<html>

<head>

  <title>My Page</title>

  <style>

    /* Define your styles here */

    body {

      font-family: Arial, sans-serif;

      background-color: lightblue;

    }

    h1 {

      color: navy;

    }

    p {

      font-size: 18px;

    }

  </style>

</head>

<body>

  <!-- Your HTML content goes here -->

</body>

</html>

Create a separate CSS file and link to it from your HTML document

style.css:

/* Define your styles in this file */

body {

  font-family: Arial, sans-serif;

  background-color: lightblue;

}

h1 {

  color: navy;

}

p {

  font-size: 18px;

}

index.html:

<!DOCTYPE html>

<html>

<head>

  <title>My Page</title>

  <!-- Link to the CSS file -->

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

</head>

<body>

  <!-- Your HTML content goes here -->

</body>

</html>

Apply styles directly to specific elements using the style attribute

<!DOCTYPE html>

<html>

<head>

  <title>My Page</title>

</head>

<body>

  <!-- Apply styles directly to this element -->

  <h1 style="color: navy;">Welcome to my page</h1>

  <!-- Your HTML content goes here -->

</body>

</html>

Common CSS properties for styling text, backgrounds, and layout

There are many CSS properties that you can use to style your HTML content. Some common properties for styling text include:

  • font-family: Specifies the font family to use
  • font-size: Specifies the font size
  • color: Specifies the text color
  • text-align: Specifies the alignment of the text

For styling backgrounds, you can use properties like:

  • background-color: Specifies the background color
  • background-image: Specifies an image to use as the background

For layout, you can use properties like:

  • display: Specifies the type of box an element should generate
  • float: Specifies where an element should be placed within the flow of the document
  • width: Specifies the width of an element
  • height: Specifies the height of an element
  • margin: Specifies the space outside an element
  • padding: Specifies the space inside an element

Here are some code examples using some common CSS properties for styling text, backgrounds, and layout:

<style>

  /* Style the body text */

  body {

    font-family: Arial, sans-serif;

    font-size: 16px;

    color: #333333;

    text-align: center;

  }


  /* Style the header */

  header {

    background-color: #eeeeee;

    background-image: url(header-bg.jpg);

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    height: 80px;

    margin: 0;

    padding: 0 20px;

  }


  /* Style the main content area */

  main {

    float: left;

    width: 70%;

    margin: 20px;

    padding: 20px;

  }


  /* Style the sidebar */

  aside {

    float: right;

    width: 25%;

    margin: 20px;

    padding: 20px;

  }

</style>

Intermediate HTML and CSS

Once you have a basic understanding of HTML and CSS, you can start exploring more advanced concepts and techniques. Here are some topics that you might want to consider when learning intermediate HTML and CSS:

Working with forms

Forms are an important part of many web applications, and allow users to enter data and interact with your site. In HTML, you can use the form element to create a form, and the input, select, and textarea elements to create form controls. You can use CSS to style the appearance of your forms and form controls, and use JavaScript to add functionality such as validation and submission.

Here is an example of a simple HTML form with a text input and a submit button:

<form>

  <label for="name">Name:</label><br>

  <input type="text" id="name" name="name"><br>

  <input type="submit" value="Submit">

</form> 

And here is an example of how you might style the form using CSS:

form {

  width: 50%;

  margin: 0 auto;

  text-align: center;

}


label {

  display: block;

  margin-bottom: 0.5em;

}


input[type="text"] {

  width: 60%;

  padding: 0.5em;

  border: 1px solid #ccc;

}


input[type="submit"] {

  width: 20%;

  padding: 0.5em;

  border: 1px solid #ccc;

  background-color: #eee;

  cursor: pointer;

}

You can also use JavaScript to add functionality to your form. For example, you might want to validate the user's input to make sure it is in the correct format before submitting the form. Here is an example of how you might do this using the onsubmit event and a simple function to check the value of the text input:

<form onsubmit="return validateForm()">

  <label for="name">Name:</label><br>

  <input type="text" id="name" name="name"><br>

  <input type="submit" value="Submit">

</form> 


<script>

  function validateForm() {

    var name = document.getElementById("name").value;

    if (name == "") {

      alert("Name must be filled out");

      return false;

    }

  }

</script>

Creating responsive layouts using CSS Grid and Flexbox

One of the challenges of web design is creating layouts that work well on a variety of devices and screen sizes. CSS Grid and Flexbox are powerful tools that allow you to create responsive layouts that adapt to the size of the screen. With CSS Grid, you can create a grid of rows and columns to layout your content, and with Flexbox, you can control the layout of elements within a container.

Here is an example of how you can use CSS Grid to create a responsive layout with a header, a main content area, and a sidebar:

.container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: 80px 1fr 80px;

  grid-template-areas:

    "header header header"

    "sidebar main main"

    "footer footer footer";

}


.header {

  grid-area: header;

  background-color: #333;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

}


.sidebar {

  grid-area: sidebar;

  background-color: #eee;

  color: #333;

}


.main {

  grid-area: main;

  background-color: #fff;

  color: #333;

}


.footer {

  grid-area: footer;

  background-color: #333;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

}

You can then use media queries to change the layout at different screen sizes:

@media (max-width: 768px) {

  .container {

    grid-template-columns: 1fr;

    grid-template-rows: 80px 1fr 80px 1fr;

    grid-template-areas:

      "header"

      "main"

      "sidebar"

      "footer";

  }

}

Here is an example of how you can use Flexbox to create a responsive navigation bar that adjusts to the size of the screen:

.nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #333;

  color: #fff;

  padding: 0.5em 1em;

}


.nav-link {

  display: inline-block;

  color: #fff;

  text-decoration: none;

  padding: 0.5em 1em;

}


.nav-link:hover {

  background-color: #444;

}


@media (max-width: 768px) {

  .nav {

    flex-direction: column;

  }

  .nav-link {

    margin: 0.5em 0;

  }

}

You can then use JavaScript to toggle the display of the navigation links on smaller screens:

<nav class="nav">

  <a href="#" class="nav-link">Home</a>

  <a href="#" class="nav-link">About</a>

  <a href="#" class="nav-link">Contact</a>

  <a href="#" class="nav-link" onclick="toggleMenu()">Menu</a>

</nav>


<ul id="menu" style="display:none">

  <li><a href="#" class="nav-link">Home</a></li>

  <li><a href="#" class="nav-link">About</a></li>

  <li><a href="#" class="nav-link">Contact</a></li>

</ul>

Adding custom fonts and icons

CSS allows you to specify custom fonts and icons for your web pages. You can use the @font-face rule to specify a custom font file, and use the font-family property to apply the font to your HTML content. For icons, you can use a font library like Font Awesome, or you can use an icon system like SVG to create your own custom icons.

Here is an example of how you can use the @font-face rule to specify a custom font file and apply it to your HTML content:

@font-face {

  font-family: "My Custom Font";

  src: url("fonts/custom-font.ttf") format("truetype");

}


body {

  font-family: "My Custom Font", sans-serif;

}

To use a font library like Font Awesome, you will need to include the font library's CSS file in your HTML file and apply the appropriate class to your HTML elements. For example:

<!-- Include the Font Awesome CSS file in the head of your HTML file -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">


<!-- Use the appropriate class to apply an icon to an HTML element -->

<i class="fas fa-envelope"></i>

To use an icon system like SVG, you can create your own custom icons and include them in your HTML file using the <svg> element. Here is an example of how you might do this:

<!-- Define the SVG icon -->

<svg style="display: none">

  <symbol id="icon-email" viewBox="0 0 32 32">

    <title>Email</title>

    <path d="M29 4h-26c-1.65 0-3 1.35-3 3v20c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-20c0-1.65-1.35-3-3-3zM12.461 17.199l-8.461 6.59v-15.676l8.461 9.086zM3.512 8.75l6.985 5.25-6.985 5.25v-10.5zM12.79 17.893l8.209-6.893 8.209 6.893h-16.418zM29 23.25l-6.985-5.25 6.985-5.25v10.5z"></path>

  </symbol>

</svg>


<!-- Use the <use> element to include the icon in your HTML content -->

<svg class="icon"><use xlink:href="#icon-email"></use></svg>

In Conclusion

After completing this tutorial, you will have a strong foundation in HTML and CSS and be able to create simple web pages and stylesheets. You will also have the skills and knowledge needed to continue learning and exploring more advanced web development concepts.

Akanne

Akanne Academy is an online learning platform that provides educational lecture materials, software tutorials, technological skills training, digital products, etc. Use the top right button to join our group.

Post a Comment

Previous Post Next Post