Hyper Text Markup Language

HTML Tags and element

  • markup language (contents: images, texts, forms) not programing language
  • one and the same thing
  • Content and Structure

live server for http protocol

  <p> </p>
  <a> </a>
  <img>

index.html

  • starting point
  • default homepage file name
  • document type <!DocTYPE html>
  • root element <html> </html>
  • head :info meta data
  • body : renders into the page
  • serries of different tags that make up the page

http over file protocol

Tags and elements

  • <p></p> Paragraph tag
  • <strong></strong> important - bold
  • <em></em> emphasis - italics
  • <small></small> small text
<p> 
  This text is now <small>small</small>; now its wrapped inside <strong>bold</strong> lets use emp tag <em>italics</em>
</p>

sample html output

Heading Tags

  • 1 to 6, 1 being most importance
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h5>Heading 4</h5>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

List item

unordered list

   <h2>unordered list</h2>
   <ul>
     <li>unordered List</li>
     <li>unordered</li>
     <li>unordered</li>
     <li>unordered</li>
   </ul>

odored list

   <h2> ordered list</h2>
   <ol>
     <li>lorem12</li>
     <li>lorem12</li>
     <li>lorem12</li>
     <li>lorem12</li>
   </ol>

<Div></Div> and <span> </span>Tag

  • group things together
  • used for styling sections
  • span way to add css or js inside a part of text

single tags

  • <"br"> does not need a closing tag
  • <hr> septate contact with horizontal rule
  • <img> image should have a src att to it
    • uses relative path or url
    • atl for screen reader or laoding when image fails
  • <a> anchor tag links to pages
    • href: hyperlink references
    • styled automatically by the browser

comments and extra

  • ctrl + / add comments to html
    <blockquote cite="google.com">some nice quote</blockquote> quote something from other site adds indentation
  • src, href, cite, alt

Forms

Label and input fields

  • these are what forms are made of
  • tags label and inputs
  • different types of attributes
    • for : used in <label> to create association with input field
    • text : we want text from user
    • email: we want email (simle validation provided)
    • password: we want password
    • radio: radio button
    • submit: a button to submit form

other attributes

  • required: makes field required
  • name attr can be used for server side processing
    • group different part of forms together
    • multiple radio buttons
  • value : to set the value
  • placeholder: text to display when field is empty
       <input type="radio" value="1" name="age" id="age1">
       <label for="age1">0-24</label>
       <input type="radio" value="2" name="age" id="age2">
       <label for="age2">24-45</label>
       <input type="radio" value="3" name="age" id="age3">
       <label for="age3">45-65</label>

radio buttons

Select box

<label for="quiz>select correct answer</label>
<select name="quiz" id="quiz"> 
  <option value="1"> answer 1 </option>
  <option value="2"> answer 2 </option>
  <option value="3"> answer 3 </option>
</select>


Text Area

  • text area is used for long text
  • row:size in rows
  • cols: size in cols
    <label for="comments">comments</label>
<textarea name="comments" id="comments" cols="30" rows="10"></textarea>

submit button

  • input type submit and value the text to show
    • browser takes all the data and sends it to
  <input type="submit" value="submit">

Form summary

  • form is a collection of fields
  • we saw how to create a form
  • input types like text, email, password radio and so on
  • how to sue label, id and name attr
  • how to use select box
  • how to use text area
  • how to create a submit button

inline/block html element

  • in line => line up next to each other span, img, strong, em
  • block => take up the whole width p, div, h1, h2 ....

HTML 5: Sementic

  • severe new tab to structure tings properly div is too generic
  • more descriptive

discriptive tags

  • main : main content of webpage, unique to page
  • section : certain section of the page
  • article : a post
  • aside : define related content (beside an article showing things related to it)
  • header: nav , title so on
  • footer: footer of the page

HTML-Sementic

<header>
  <h1>   Qasim Header </h1>
  <section>
    <img src="2022-05-03-01-11-11.png" alt="header image">
    <div class="headerDiv">
      <h2> welcome to <br> <span>QasimClass</span></h2>
    </div>
  </section>
  <nav>
    <ul>
      <li><a>home</a></li>
      <li><a>about</a></li>
      <li><a>contact</a></li>
    </ul>
  </nav>
  <main>
      <article> <h2> lorem12 </h2>
      <p></p>
      </article>
      <ul>
      <li><a>home</a></li>
      <li><a>about</a></li>
      <li><a>contact</a></li>
    </ul>
  </main>
</header>