HTML and CSS Week 1 Lecture 1.pptx

HTML and CSS
for Absolute Beginners
Presenter: Abdul Basith
IT Trainer, King Saud University
December, 2022 Presenter: Abdul Basith 1

Learning Outcome of this Course
• In this course, we'll create a simple webpage using valid HTML and
CSS code
• By the end of this course, you'll be able to use HTML and CSS with
confidence, following best practices every step of the way!

Week 1: Lecture 1
Basic of HTML

Course Content
• Introduction to HTML
• History of HTML
• Software Tools
• Understanding HTML Syntax
• Work on HTML Code

Introduction to HTML
• HTML is a language which is used to create document on the World Wide Web.
• HTML stands for Hyper Text Markup Language
• HTML is not a programming language, it is a markup language which read and
interpreted by your browser
• A markup language is a set of markup tags
• HTML uses markup tags (HTML Tags) to describe web pages that run on browser

History of HTML
• HTML consists of lines of text with embedded markup tags that specify Web-page
formatting and links to other pages is Invented by Tim Berners-Lee at CERN in
1989
• In 1993, students, faculty, and staff of the National Center for Supercomputing
Applications (NCSA) developed the first Web server and graphical browser -
Mosaic Web browser(Later become Netscape) and Web server
• Current version is HTML 5 and its the Successor of HTML 4.01 and XHTML 1.1

Software Tools
Discover what software you need to write HTML and CSS code, and where to download it for free!
Let's get started!
• Download a free web browser anyone:
1. Chrome (Mac/PC)
2. Firefox (Mac/PC)
3. Internet Explorer (PC)
4. Opera (Mac/PC)
5. Safari (Mac/PC)
• Download a free text editor:
1. Notepad++ or Sublime Text(Win)
2. TextWrangler (Mac)

Understanding HTML Syntax
HOW TO CREATE AN basic HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<title>King Saud University</title>
</head>
<body>
Welcome to HTML and CSS language
</body>
</html>
Note: All tags are in lowercase
All tags must be closed - Empty tags and Paired tags

Element Importance Description
<html></html> Essential Surrounds the entire page
<head></head> Optional Contains header information (metadata, CSS styles,
JavaScript code)
<title></title> Optional Holds the page title normally displayed in the title
bar and used in search results
<body></body> Essential Contains the main body text. All parts of the page
normally visible are in the body
<!DOCTYPE html> Optional tells browser how to interpret the markup tags
PAGE STRUCTURE ELEMENTS
The following elements are part of every web page.

Work on HTML Code
Follow the steps to create and view in browser
Step-1: Open text Editor
Step-2: Enter the following lines of code
<!DOCTYPE html>
<html>
<head>
<title>King Saud University</title>
</head>
<body>
Welcome to HTML and CSS language
</body>
</html>

Work on HTML Code
Step-3: Save the file as myfirstpage.html (go to File-Save As give File
name: myfirstpage.html-choose save as type: All Files-click save)
Step-4: Viewing document in web browser (open any browser-click on
File-Open-Browse-select the file myfirstpage.html-click open-click ok

Work on HTML Code
Example 1: Use attributes of body and font color
<html>
<head>
<title>Hello World</title>
</head>
<body bgcolor = “#000000”>

<H1>Hello World</H1>

</body>
</html>
The HTML bgcolor attribute is used to set the background color of an HTML element:
• The Atrribute value can be anyone of the following:
• colorname: The background color is set by using the color name. For example “yellow”
• hexnumber: The background color is set using the color hex code. For example “#0000ff”.
• rgbnumber: The background color is set by using the RGB code. For example: “RGB(0, 153, 0)”.

Work on HTML Code
Example 2: Use Text Formatting
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<big>Hello World!</big>
</body>
</html>

Work on HTML Code
Example 3: Use Blank Spaces/ Whitespace
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
test1 | test2  |  test3
<pre>test1 | test2| test3</pre>
</body>
</html>

Work on HTML Code
Example 4: Use del and ins tags
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
I want to drink <del>cola</del> <ins>wine</ins>
</body>
</html>

Work on HTML Code
Element Meaning Purpose
 Bold Highlight important information
 Strong Similarly to bold, to highlight key text
 Italic To denote text
 Emphasised Text Usually used as image captions
 Marked Text Highlight the background of the text
 Small Text To shrink the text
<strike> Striked Out Text To place a horizontal line across the text
 Underlined Text Used for links or text highlights
<ins> Inserted Text Displayed with an underline to show an inserted text
 Subscript Text Typographical stylistic choice
 Superscript Text Another typographical presentation style
Other Key Elements
These tags must be opened and closed around the text

Work on HTML Code
Use pervious slide elements and do practice now

Conclusion
• Understand HTML Language
• Understand Software Tools
• Learn How to create document and run

HTML and CSS Week 1 Lecture 1.pptx

More Related Content

Similar to HTML and CSS Week 1 Lecture 1.pptx (20)

Recently uploaded (20)

HTML and CSS Week 1 Lecture 1.pptx