Scribd Logo
Upload

Welcome to Scribd!

  • Lesson1 BasicHTMLs

    Uploaded by

    nanda
    28 views25 pages

    Original Title

    Lesson1_BasicHTMLs (3)

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    28 views25 pages

    Lesson1 BasicHTMLs

    Uploaded by

    nanda

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 25

    Unit 4 – All About Me

    HTML – CSS – JavaScript


    Lesson 1 - HTML
    Unit Overview
    • Lesson 1 - HTML Basics and set up in Ms Dreamweaver
    • Lesson 2 – Adding tables and Images
    • Lesson 3 - Intro to CSS and development
    • Lesson 4 – Intro to Java Script and create mini Quiz
    • Lesson 5 – Completion of Web Page
    • Lesson 6 – Assessment: MS Forms and Peer Assessment
    Starter: Match the HTML tags [number] with the
    description [letter] of what they do
    1. <u> </u> a. Makes the text BOLD

    2. <head></head> b. Underlines the text

    3. <body></body> c. Encloses the head of the HTML document

    4. <p></p> d. Creates a link to another webpage

    5. <h1></h1> e. Makes the text italic

    6. <a href=”http://www.google.com”></a> f. Encloses the body of the HTML document

    7. <b></b> g. Formats the text to heading 1

    8. <i></i> h. Creates a new paragraph of text


    How did you do?
    <u> </u> Underlines the text
    <head></head> Encloses the head of the HTML document
    <body></body> Encloses the body of the HTML document
    <p></p> Creates a new paragraph of text
    <h1></h1> Formats the text to heading 1
    <a href=”http://www.google.com”></a> Creates a link to another webpage
    <b></b> Makes the text BOLD
    <i></i> Makes the text italic
    Learning Objectives
    • To understand what HTML is and what it is used for

    • To understand the difference between html and CSS

    • To be able to type basic HTML tags using MS Dreamweaver


    to create a page that can be viewed in a browser
    World Wide Web (WWW)
    • The World Wide Web is a huge collection of websites that we can
    access using the Internet

    • Each website contains web pages which are navigated to via


    hyperlinks

    • Web pages contain different types of information including images,


    text and multimedia
    Where are all the websites stored?
    • Websites are stored on web servers all over the world
    • There is no central storage of websites
    What happens when I view a web page?

    Your Computer Your ISP Website Host /


    Internet Server
    Quick Research Task [5mins]

    Use the internet to find out what the following stands for:

     HTML
     CSS

    Task- Write one sentence to explain the difference between the two
    in your yellow book.
    HTML & CSS

    HTML (Hypertext Markup Language)


    HTML is the language for describing web pages.

    CSS (Cascading Style Sheets)


    A style sheet is a file that describes how a HTML file should look.

    The difference: HTML describes a webpage but CSS describes how it will look.
    What is HTML?
    • HTML is a language for describing web pages.

    • A markup language is a set of markup tags

    • The tags describe document content

    • HTML documents contain HTML tags and plain text

    • HTML documents are also called web pages


    HTML Code
    Hello World
    The first program that anyone should write in any language is the "Hello
    World" program

    HTML is just a text file read by web browsers therefore can be written in the software, we
    are going to use a new application called Dreamweaver
    Lets get started..
    • Firstly, create a folder in your Year 8 Computer Science folder,
    called:

    • Unit 4: All about me

    • Inside that folder create two folder


    • One called “WebPage”
    • Second called “Resources”
    Set up Dreamweaver
    • Firstly we need to set up in Dreamweaver and create our folders

    • Follow the ‘How to set up in Dreamweaver’ resource to get started


    Hello World
    1. Type out the code below into the Html page

    2. Click on the Save file in the correct folder (look up the


    folder you created in your documents)

    3. To view your page in browser, click on  the little arrow on the world icon
    and preview in IExplore
    Viewing in the Browsers
    <head> contains
    info about your
    HTML file e.g.
    title

    <body> is where
    you put the
    content e.g. text,
    images etc.
    1. Heading <hx> </hx>
    • Now you can put on heading size tags. 
    • These come with numbers with 1 being the largest and 6 being the
    smallest:
    • <h1>  </h1>
    • Put on <h> start and end tags from <h1> to <h6> as shown here

    Go on, your turn – try the same title in 6 different headings


    2. Bold, Italics,
    underlined
    • Lets try putting some formatting on the heading.
    • Go back to your code page and find the text you
    wrote ‘Hello World’ – Make the following
    changes as in the image:

    1. Lets try making it bold.  Bold tags are <b> and </b>
    Put in these tags and save your code version.

    2. Go on, your turn – try the above and do


    the same with
    <i> = italics an
    <u> = underlines
    3. Paragraph
    • You need more than just a heading on your page.  You will want some paragraphs of text. 
    • A <p> or paragraph tag will tell the web browser that you want to start a new paragraph.  Unlike a word
    processing document, pressing the ‘enter’ key will have no effect.  You could press it hundreds of times and
    you still wouldn’t get a new paragraph.

    Go on, your turn – try the paragraph


    4. Font Sizes
    • You know how to make headings bigger or smaller by using <h> tags.
    • You can also make text larger or smaller in the main part of your web page by using a <font size>
    tag.
    • Type in the following text
    • Now type in the <font size=”7”> tag and put an end of font tag </font>
    • Remember to use speech marks as shown.
    Go on, your turn – try the font sizes
    Student Task: Lets try this..
    Code the following paragraph
    (note: The title should be a “Heading 2” and you must code the formatting techniques used i.e bold,
    italics etc)

    About me
    Welcome to the first webpage that I have coded in HTML. I am “x” years old and I live in the X.

    I hope that you come back soon and visit the page to see what else I have learned to do in HTML.
    Congratulations, you have created your first
    web page
    1. Double click on your Index file

    In your books write the following:

    3 things I have learnt today are:

    1 thing I would like to learn about HTML is:


    Homework
    • Homework Website Planning and Design
    • Complete your design, think about the colours you will
    use, no more than 3 main colours

    • Watch and summarise the video below, Fonts,


    Colour & Background:
    • https://www.youtube.com/watch?v=eUsuuxo3nYo
    Learning Outcomes
    • You should be able to explain what HTML is and what it is used for

    • You should be able to explain the difference between HTML and CSS.

    • You should be able to set up MS Dreamweaver to start creating web


    pages with guidance.

    You might also like