Intro  to HTML & CSS

Halah Al-Shaikhly

@twitter: HalinaSalih

http://slides.com/halahsalih-1/intro-to-html-css

Set up environment

  • 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

Made with Slides.com