Intro to HTML & CSS
Halah Al-Shaikhly
Set up environment
- For convenience http://codepen.io/pen/?
- Any text editor: Sublime, Atom and Brackets
- You can use textEdit on mac and save file with html/css extension
- Microsoft word and save the file with html/css extension
HTML Definition
Hypertext Markup Language
it is the structure of your web page.
HTML Definition
Hypertext Markup Language
it is a text with links in it
HTML Definition
Hypertext Markup Language
it is a programming language that makes text more than just text. It can turn in it to images, tables and links ... etc
HTML: Syntax
HTML elements : headers, paragraphs, links, images, tables ..
Html tags <> things between <> are called tags
Tags have opening tag & closing tag but not alalways
<p></p>
HTML: Doctype
- it's the first line of you html document
- it is not an html tag, it is an instruction
- it tells your browser that you're using html as a markup language
- it DTD document type definition
- it defines the rules of the mark up language and browser rendering mode
<!DOCTYPE html>
Check point
- What is html?
- What does doctype do?
- Are there other markup languages?
- What is a browser rendering mode?
- Are there several browser modes?
- What happens if you don't add <!DOCTYPE html> to the beginning of html document?
<!DOCTYPE html>
HTML: Tags
- things between <> are called tags
- Tags come in pairs, opening tag and closing tag
- Tags nest, a tag can be inside a tag
<html>
</html>
HTML: html Tags
- Everything in file must go between these tags
- HTML has two parts : head and body
<html>
</html>
HTML: head
- Head tags contains information about your html, often referred to as metadata.
- Information? Title, references to external resources, language .. etc
- Title? The title you see on the browser tab
<head>
</head>
HTML: head
<!DOCTYPE html>
<html>
<head>
<title>About me<title>
</head>
<body>
</body>
</html>
HTML: body
<body>
</body>
- Body where content goes
- Such as text, images, links ... etc
HTML: body
<!DOCTYPE html>
<html>
<head>
<title>About me<title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>
Checkpoint
- What are the components of html tag?
- define them
- Exercise : html doc, display your name on the page using h1 and p to display your current job title.
HTML: h1,h2,h3,h4,h5 & h6
<body>
<h1> I'm h1 </h1>
<h2> I'm h2 </h2>
<h3> I'm h3 </h3>
<h4> I'm h4 </h4>
<h5> I'm h5 </h5>
<h6> I'm h6 </h6>
</body>
congrats you can have 6 heading sizes
HTML: anchor tags(links!!!)
<a href="[link to something]"> [Link title] </a>
HTML: Images
<img src="[link to image]"/>
HTML: unordered lists
<h1>Favourite TV Shows</h1>
<ul> Favourite TV Shows
<li>Game Of Thrones</li>
<li>Suits</li>
<li>Person Of Interest</li>
</ul>
HTML: ordered lists
<h1>Favourite TV Shows</h1>
<ol>
<li>Game Of Thrones</li>
<li>Suits</li>
<li>Person Of Interest</li>
</ol>
HTML: exercise
About Me Page
- Create html document
- Consider this your About Me Page
- Add h1 to display your name
- H3 to create name of to do list
- Create ordered and unordered to-do lists of your favourite things and such
- Add a link to website of your choice
- Add an image(s) of your choice
HTML: div tag
- it stands for division
- it is used to create a devision in html
- often referred to as a container
- used to group other html elements to style them
<div></div>HTML: Inline Styling
- src , href? These are called attributes
<h1 style="color: red"> Hello World! </h1>
<p style="color: green; font-size:10px">I'm green and small.</p>HTML: Styling
- src , href? These are called attributes
<h1 style="background-color: red"> Hello World! </h1>
<h1 style="text-align: center"> Hello World! </h1>
HTML: bold and italic
- <strong> </strong>
- <em></em>
Checkpoint
- Can we style html inline?
- Can we have multiple styling properties?
CSS
- It stands for Cascading style sheets
- used to style html elements
- you can add css either internally (inside the html) or externally, in a separate css file and reference to them from the html (between the head tags)
CSS: Internally
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
h1{
color: red;
}
</style>
</head>
<body>
<h1>Random</h1>
</body>
</html>CSS: Externally
- Create a css file, same way create html file, name it style.css
- How does my html file know about this css file?
- We have reference to that style.css file from inside the html
- which part of the html is used to refer to external resources? Head tags
CSS: Externally
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Random</h1>
</body>
</html>
CSS: Example
h1{
color: red;
background-color: green;
text-align: center;
}CSS: classes
// index.html html body
<body>
<h1 class="aboutMeTitle">Random</h1>
<h1>Blah blah</h1>
</body>// style.css
.aboutMeTitle{
color: green
}CSS: id
// index.html html body
<body>
<p id="someParagraph">
October arrived, spreading a damp chill over the grounds and into the castle.
</p>
</body>// style.css
#someParagraph{
text-align: center;
color: rgb(150, 100, 150);
}multiple classes and ids
Check Point
- What is CSS
- What does CSS stand for?
- What is the difference between Classes and IDs?
- Which one is better inline styling, internal CSS or external CSS and why?
Extercise
- continue your about me page by styling everything there
- create css file and add properties there
THE END ..
Halah Al-Shaikhly
@twiter: halinaSalih
@email:halah.alshaikhly@gmail.com
@github:halahRaadSalih
Intro to HTML & CSS
By Halah Al- Shaikhly
Intro to HTML & CSS
- 999
