Intro to HTML - Mohammed Mashhadi

Welcome to Intro to HTML. The purpose of this course is to get you started on the basics about creating web pages using HTML and CSS. Together we’ll learn to create our first web page using HTML. We’ll then learn basic styling skills linking our HTML files to CSS.

Module 1

Lecture 1


Welcome to the Intro to HTML course. The purpose of this course is to get you started on the basics about creating web pages using HTML and CSS. Together we’ll learn to create our first web page using HTML. We’ll then learn basic styling skills linking our HTML files to CSS.

Through the lengh of this course, in adittion to the lectures, we’ll use websites that will allow you to practice online (no need to download a program) what we learn. This websites will also give the option to increase your knowledge as you use them to practice on your own time.


W3Schools

Validator



You can also use the following document through the length of this course to learn different tricks and codes of HTML

introHTML

Lecture 2

HTML is a standard language used to create websites . It is not difficult to learn and you can create amazing things with it.

The following is a basic intro to HTML. You can also find more details visiting the following link: https://www.w3schools.com/html/html_intro.asp (Links to an external site.)Links to an external site.) or reading the presentation "Intro to HTML" found on the Files folder.

Here’s an example of a basic HTML document:

<!DOCTYPE html>

<html>

<head>

<title>My Fisrt HTML File</title>

</head>

<body>

 <h1>This is my Heading</h1>

<p>Here is my paragraph.</p>

 </body>

</html>

 

Here’s the explanation of the document:

The <!DOCTYPE html> declaration defines this document to be HTML5

The <html> element is the root element of an HTML page

The <head> element contains meta information about the document

The <title> element specifies a title for the document

The <body> element contains the visible page content

The <h1> element defines a large heading

The <p> element defines a paragraph

 

HTML tags ussually come in pairs like <h1> and </h1>.The first tag in a pair is the start/opening tag, the second tag is the end/ending tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name.

The following link includes a list of the tags used on HTML with their description: https://www.w3schools.com/tags/default.asp (Links to an external site.)Links to an external site.

Web browsers read the HTML document and display its content (not the tags but their content).

 

Here’s how our example will look in the web browser:



Tutorial

You can use this video to practice what you've learned on module 1.

Module 2

Lecture 1

Intro to CSS

CSS is a Style sheet that describes how the elements of HTML will be displayed. As described on the W3Schools website we’ve been using for this course, “CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.” 

Background

For instance, if we would like to add a background to our website, we should use the background-color  property.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

body {

    background-color: lightblue;

}

</style>

</head>

<body>

<h1>Hi All!</h1>

<p> This page will display a light blue background color!</p>

</body>

</html>


Results:

For more information on adding background to you web page, use the following Link

Lecture 2

This week, we'll continue styling our web page. Today we'll focus on fonts.

Fonts

The CSS font properties define the font family, boldness, size, and the style of a text.

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

p.serif {

    font-family: "Times New Roman", Times, serif;

}

p.sansserif {

    font-family: Arial, Helvetica, sans-serif;

}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>

<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

 </body>

</html>

 

Results:

For more information on adding different fonts to your web page, use the following Link


Tutorial on styling your resume

You can use this video to practice what you've learned on the 2nd module.