30
Introduction to HTML and CSS
Introduction to HTML and CSS
What is HTML?
HTML –HYPER TEXT MARKUP LANGUAGE is a
language used to write web pages, what ever you see on any website, it has been written in HTML. It is used to make a basic structure of any website – the images you see, the paragraphs, headings, columns -- it is all written in HTML.Learning HTML is the first step towards web designing.
Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear - that is, they had a specific order. But with a "hyper" language such as HTML, the user can go anywhere on the web page at any time.
Text - the characters used to make up ordinary words.
Mark-up is what is done to the text to change its appearance. For instance, "marking up" your text with <b> before it and </b> after it will put that text in bold.
Language is just that. HTML is the language that computers read in order to understand web pages.
What is HTML?
Let’s Get Started!
Before we start writing any code you will need a place to save it.
On your desktop or in your Documents folder create a folder called
‘HTML Coding’
Let’s Get Started!
All you need to start writing HTML is a simple text editor and a browser.
Just be sure you're creating plain text files (just characters with no formatting support). If you're using TextEdit on your Mac, you can choose
"Make Plain Text" from the "Format" menu.
Notepad on Windows TextEdit on the Mac
Let’s Get Started!
Find and Open your Text Editor Now
Notepad on Windows TextEdit on the Mac
Let’s Get Started!
HTML documents are made up by HTML elements.
Elements are written with start and end tags
Let’s Get Started!
Tag syntaxHTML tags follow a simple
but strict syntax:Opening angle bracket (<)
Tag Name (p)
Attributes (optional). First a space, then the attribute name, an equal sign (=), and a value enclosed in double quotes (“ ”).
Closing angle bracket (>) – i.e. <p>
If it is a closing a tag you add a / `before the element – i.e. </p>
Let’s Get Started!
The first thing we should do is set up the skeleton of the page.
The page should begin with <html> tag. This starts the HTML document.
The page should end with a </html> on the last line. This ends the HTML
document.
Learnthe Code
<html>
<head>
<title>My First Page</title>
</head>
<body>
This is my first page.
</body>
</html>
This tag defines the beginning of HTML code
This is where HTML code ends
Information about the document
This is what the tab in your browser will say and what the title will be if your page gets bookmarked
This is the start of the visible content
Save the file as
first.html
By naming it with .html you change it from just a text file to an html file that will be opened
by your browser
Learnthe Code
Your First
HTML File
Go to the HTML Coding folder your created and
double-click the file first.html
and it should open in your default browser.
Your First
HTML File
Your html files should open in your default browser –
when you need to open them for editing simply
Right-click and choose ‘Open With…’ and then choose your
text editor.
Common Tags<p>
The HTML <p> element defines a paragraph. It goes in the <body>
section of your file.
Browsers automatically add an empty line after a paragraph.
<p>You can place content here</p>
Common Tags<p>
Let’s add some paragraph tags to our html document…
Common Tags<br>
The <br> tag will insert a line break in your text. It does not need to be
closed.
Common Tags<br>
Let’s add a <br> tag our html document…
Common Tags<h1>
The <h1> to <h6> tags are used to define HTML
headings.
<h1> defines the most important heading. <h6>
defines the least important heading.
Common Tags<h1>
Let’s add some header tags our html document…
Common Tags<img>
The <img> tag will display a defined image
<img src=”image URL“ alt=“alternate text ”>
Common Tags<img>
There should be a picture of an orange herebut something went wrong!
Because I defined the ‘alt’ property theuser has an idea of what should
have been displayed
Common Tags<img>
Let’s add an image to our html file-
www.traceynautel.com
Right-click and save the orange.jpg image to your HTML Coding folder
Common Tags<img>
The <img> tag will display a defined image
<img src=”orange.jpg“ alt=“an orange”>
Because the image is in the same folder as our html file we only need to call the image filename. If it were in a subfolder you would
need to point to that first.
What is CSS?
CASCADING STYLE SHEETSare the standard way to define the
presentation of your HTML pages, from fonts and colors to the complete layout of a page. They are much more efficient than
using HTML on every page to define the look of your site.
What is CSS?
You can define styles several ways –
Inline with the tag itself,
Internally at the start of your page in the <head> section using the <style> tag
Externally as a separate CSS file that your HTML pages point to.
Let’s Use Styles
Inline StylesYou can call upon a style within the
tag of your element such as:
<p style="color: yellow;">This text will be yellow</p>
<body style="background-color: blue;">
Let’s Use Styles
Internal StylesAnother option is to define your styles at the
beginning of your page in the <head> section.
Open and close the style section
<style>
</style>
All of your defined styles will go between these tags.
Let’s Use Styles
Internal Styles<head>
<style>
body {
background-color: #cccccc;
}
</style>
</head>
Let’s Use Styles
External StylesYou define your styles much like you did
with internal format but you define them and save as a separate text file which you
name **.css
Then on your html pages in the <head> section you can reference that stylesheet file.
Let’s Use Styles
This is what the code would like to point to a stylesheet named ‘styles.css’ that is in a
subdirectory called ‘css’
<head><title>Hi there</title><link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
