Scribd Logo
Upload

Welcome to Scribd!

  • HTML For Newbies

    Uploaded by

    A
    7 views31 pages
    HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.

    Original Description:

    Original Title

    HTML for Newbies

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    7 views31 pages

    HTML For Newbies

    Uploaded by

    A
    HTML for Newbies provides an introduction to HTML. It defines HTML as a markup language that is used to structure and format text on web pages. It distinguishes HTML as a markup language rather than a programming language, noting that markup languages tell computers what to do without instructions on how to do it. The document provides examples of HTML code and its output, and discusses common HTML elements and tags such as <a>, <div>, <br>, and <hr>, explaining their purposes. It concludes with an interactive trivia quiz about HTML.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 31

    HTML for Newbies 💻

    What's HTML??
    HTML stands for Hyper Text Markup Language. It is a text markup language
    and it's the standard markup language for creating web pages.
    What does that mean?
    A markup language is a computer language that consists of simple keywords,
    names or tags to help format and structure the way in which text is
    displayed.
    There are several markup languages used by coders but html is the most
    commonly used one and as such it's the standard markup language that most
    browsers recognize.
    Simply put, html is what's used to “manually format" text. Formatting
    basically entails making text bold, italics, underlined and other similar text
    customization.
    So now that you have an idea of what HTML is there's one
    important thing you should know
    HTML is NOT a programming language, it is a MARKUP language.
    Why is this distinction important?
    Programming languages are used to give computers instructions to perform tasks. It tells a
    computer how to DO something. Programming involves complex levels of instruction to
    computers.
    Markup languages are “declarative languages" - they tell the computer what must be done
    but provide no instructions on how to do it. Markup languages are somewhat simpler than
    programming languages.
    As html formats text, which is describing for the computer how it should look, without
    saying how to get it to look that way it's a markup language.
    This is a simplified distinction but for now, it's enough to know that html isn't a
    pprogramming language.
    After all of this defining you're probably wondering what HTML is
    actually *used* for
    For starters, html is used to structure the data and text on websites, apps and other web
    applications.

    Html has a series of “elements” that “wrap” or are placed around portions of text to make it
    appear or act in a certain way.

    Somethings html can do are:

    ➢ Make text bold


    ➢ Center text
    ➢ Male font bigger/smaller

    On it's own, html is just a text formatter but when combined with other languages like CSS,
    Python or JavaScript it can be used to construct fully functional and complex websites.
    An Example of HTML Code

    Source : https://www.w3schools.com/html/html_intro.asp
    Output of that HTML Code

    Source : https://www.w3schools.com/html/html_intro.asp
    Elements and Tags in HTML
    Looking at that piece of code on the previous slide you've probably noticed lots of
    words enclosed in angle brackets, <>.

    These words are html “tags”. They are what defines how the text should be
    displayed and they give structure and organization to a web page.

    An html element conaists of a start tag, content to be formatted and then an end
    tag.

    For example:

    <tagname> Hello! </tagname>

    Tags themselves are not visible to viewers of a website but their effects on the
    text can be seen.
    Elements and Tags in HTML continued
    Elements can be placed inside of other elements, this is known as nesting.

    For example:

    <Element1>

    <Element2>

    My favorite color is grey.

    </Element2>

    </Element1>

    Element2 is inside of Element1, therefore anything done to Element1 will affect


    Element2 as well
    HTML Tags and Their Purposes
    <!DOCTYPE html>

    All html documents must start with a


    <!DOCTYPE> declaration.

    This declaration isn't actually an html


    tag, it's a type of information telling te
    browser what type of document to
    expect so it knows how to read/display
    it.

    The latest version of html, HTML 5 uses


    <!DOCTYPE html>. This declaration is
    not case sensitive, but doctype is
    generally written in all caps.
    HTML Tags and Their Purposes
    <a> </a>
    This is the “anchor” tag. This tag creates a hyperlink which is used to link to
    another web page, file, email addrers, another location in the same page or
    anything that can be addressed by a URL.
    These links have a “href” (hyperlink reference) attribute which indicates the
    destination of the link.
    A “deadlink” can is when an anchor link is created but there is no defined
    destination for the link to go to.
    The “target” attribute can be used to specify where the link should be opened. If
    yhe target is not specified then the link opens in the same browser page.
    target=”_blank” - opens the link in a separate browser page.
    Source : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
    Source : https://www.javatpoint.com/html-anchor
    HTML Tags and Their Purposes
    <div> </div>
    This element creates a division or section of an html page. It's essentially an
    all-purpose container, any sort of content can be placed within or it can be left
    empty of content and simply styled using CSS.
    It does not inherently represent anything or have a specified purpose like the
    other container elements <body>, <head>, <p>, etc.
    By itself the div element has little effect on the web page. It's used to group
    content and for other organizational purposes.
    When used in tandem with CSS div elements can be used as the building blocks for
    complex animations or they can be given special effects.
    Source : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
    Source :
    https://developer.mozilla.org/en-US
    docs/Web/HTML/Element/div
    HTML Tags and Their Purposes
    <br>
    This element crates a break in lines of text. The text will restart on the next line.
    It is very useful in instance where the division of lines of text is significant eg
    poems, letter introductions or simply for stylistic preferences.
    There is no end tag as this is what is known as an empty tag.
    As there is a singular purpose for this tag (to create a line break in text) there is
    no visual output for this tag (it cannot be seen by viewers of a website), also there
    are minimal styling options for this element.
    Source : https://www.w3schools.com/tags/tag_br.asp
    HTML Tags and Their Purposes
    <hr>
    This element stands for horizontal rule and represents a thematic break or change
    in the content of a page.
    It separates a document into sections based on similar content.
    It is generally displayed as a horizontal line and unlike the <br> tag there is a visual
    output for this tag.
    It is an empty tag and therefore does not require an end tag.
    Source : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
    It's time for….………….

    TRIVIA
    Which would be bigger a h1 element or a h6
    element?

    A. The h1 element
    B. They'd be the same size
    C. The h6 element
    D. There's no h6 element
    And the answer is……..

    A. The h1 element
    What type of language is html?
    A. English
    B. A programming language
    C. A computer language
    D. A markup language
    And the answer is……..

    D. A markup language
    Which of the following can you do with
    html

    A. Build a time machine


    B. Play Despacito
    C. Format text
    D. Build a video game
    And the answer is……..

    C. Format text
    Are tags visible to viewers of a
    webpage?

    A. Yes they are


    B. Tags are the only thing
    viewers see
    C. Viewers can't see webpages
    D. No, viewers can't see tags
    And the answer is……..

    D. No, viewers can't see tags


    What is it called when an element is
    placed inside of another element?

    A. Nesting
    B. There's no specific name for
    that
    C. Matryoshka
    D. Roosting
    And the answer is……..

    A. Nesting
    Thanks for coming everyone!
    We hope you had a great time and we'll
    see you soon!

    You might also like