Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    Web Design-Lecture 2 - HTML

    Uploaded by

    James Lues
    Web design learning

    Copyright:

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

    You might also like

    Web Design-Lecture 2 - HTML

    Uploaded by

    James Lues
    5 views30 pages
    Web design learning

    Original Title

    Web Design-lecture 2- HTML

    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
    Web design learning

    Copyright:

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

    Web Design-Lecture 2 - HTML

    Uploaded by

    James Lues
    Web design learning

    Copyright:

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

    Web Design Faculty of Science

    Computer Science Dept.


    Second Stage
    Lecture 2:
    Introduction to HTML

    Hoshang Qasim
    E-mail: hoshang..awla@soran.edu.iq
    2021
    What is Website concept?

    • website refers to a ‘site’ on the ‘web’ where you can put information
    about your business or organization and internet users can access it by
    using the internet.

    • website is a collection of publicly accessible, interlinked Web pages that


    share a single domain name.

    • Websites can be created and maintained by an individual, group, business


    or organization to serve a variety of purposes.
    2
    How Website are created?

    What you see?

    • When you are looking at a website, it is most likely that your browser will
    be receiving HTML and CSS from the web server that hosts the site.

    • The web browser interprets the HTML and CSS code to create the page
    that you see.

    3
    • Most web pages also include extra content such as images, audio, video,
    or animations.
    How Website are created?

    How it is created?
    • Small websites are often written just using HTML and CSS.
    • Larger websites — in particular those that are updated regularly and use a
    content management system, or e-commerce software — often make use
    of more complex technologies on the web server, but these technologies
    are actually used to produce HTML and CSS that is then sent to the
    browser.
    • If your site uses these technologies, you will be able to use your new
    HTML and CSS knowledge to take more control over how your site looks
    4
    How Website are created?

    HTML5 & CSS3


    • Since the web was first created there have been several versions of HTML
    and CSS - each intended to be an improvement on the previous version.
    • Till today, HTML5 & CSS3 were still being developed. Although they had
    not been finalized.
    • Many browsers were already supporting some features of these
    languages and a lot of people were using the latest code on their
    websites.
    • Because HTML5 and CSS3 build on previous versions of these languages,
    5 learning these means you will also be able to understand the earlier
    versions of them.
    HTML vs CSS

    6
    Basics of HTML

    What is HTML?
    • First developed by Tim Berners-Lee in 1990,
    • HTML is a computer language devised to allow website creation.
    • HTML is a markup language for describing web documents (web pages).
    • HTML stands for Hyper Text Markup Language.
    • An HTML file is a text file containing markup tags.
    7
    • HTML is a Language, as it has code-words and syntax like any other language.
    Basics of HTML

    How Does it work?

    • HTML consists of a series of short codes typed into a text-file.


    • The text is then saved as a .html or .htm file.
    • Viewed through a browser, like Internet Explorer or any browsers.

    • This browser reads the file and translates the text into a visible form
    8
    Basics of HTML

    What is HTML tag


    • HTML tags are used to mark-up HTML elements
    • HTML tags are surrounded by the two characters < and >
    • The surrounding characters are called angle brackets
    • HTML tags normally come in pairs like <b> and </b>
    • The first tag in a pair is the start tag, the second tag is the element content
    • HTML tags are not case sensitive, <b> means the same as <B>
    9

    • Normally written HTML tags by lowercase .


    Basics of HTML

    How to write and make code for html?

    • It does not require expensive development tools, You can start with a
    simple text editor such as Notepad.
    • Since it is an interpreted language inside the context of a web browser, you
    don't even need to buy a compiler.
    Macromedia
    Microsoft
    Dreamweaver Sublime Text
    FrontPage
    MX

    10 Notepad ++
    What is HTML

    First Example

    <html>
    <head>

    <title> Page Title </title>


    </head>

    <body>

    This is my first home page


    <b> this is bold text</b>

    </body>
    11 </html>
    What is HTML
    Explain the first example
    • <html> first tag in html, this tag tell the browsers that is start of an html document

    • </html> Last tag in html, this tag tell the browsers this is the end of the html
    document.

    • <head>….</head> text between those two tags are header, also header information
    is not displayed in the browsers window

    • <title>…..</title> the text between those two tags are title of the document and is
    displayed in the browsers
    12

    • <b>…</b> text between those two tags are shown as a bold text
    Tags and elements HTML

    Example
    Element • The opening tag says, “This is the beginning of a heading”

    • The closing tag says, “This is the end of a heading.


    <hl> About Google </hl>

    content
    Opening tag Closing tag

    13
    Skeleton of HTML
    HTML

    <html>
    • four main elements that form the basic structure of every document:
    <html>, <head>, <title>, and <body>
    <head>
    • These four elements should appear in every HTML document
    • Its called skeleton of the HTML document
    <title>
    • without the skeleton HTML files will not be rendered correctly
    in web browsers
    <body>

    14
    Skeleton of HTML5

    • Visualization of an
    HTML page structure:

    15 Note Only the <body> area (the white area) is displayed by the bowser.
    Basics of HTML

    Basic tag structure


    • The most important tags in html are tags that define headings, paragraphs and
    line breaks.
    Headings
    • Heading are defined with the <h1> to <h6> tags.<h1> defines the largest heading.
    <h6> define the smallest heading.
    <body>
    <h1>this is heading</h1>
    <h2>this is heading</h2>
    <h3>this is heading</h3>
    <h4>this is heading</h4>
    <h5>this is heading</h5>
    16
    <h6>this is heading</h6>
    </body>
    Basics of HTML

    Paragraph
    • Paragraphs are define with the <p> tag:

    <body>
    <p> this is paragraph</p>
    <p>
    HTML is a computer language devised to allow
    website creation.
    HTML stands for Hyper Text Markup Language
    An HTML file is a text file containing markup
    tags.
    HTML is a Language, as it has code-words and
    syntax like any other language.
    17 </p>
    </body>
    Basics of HTML

    Line Breaks
    • The <br> tag is used when you want to break a line , but don’t want to start a new
    paragraph.
    <html>
    <body>
    <p> this <br> is a para <br>graph with line
    breaks</p>
    </body>
    </html>

    <html>
    <body>
    <p> this is a para graph with line breaks</p>
    18
    </body>
    </html> Without line break
    Basics of HTML

    HTML attributes

    • Attributes provides additional information to an HTML element.


    • Attributes always come in name/value pairs like this name=“value”.
    • Attributes are always specified in the start tag of an HTML element.
    <h1>this is heading</h1> <h1 align=“center”>this is heading</h1>

    19
    Without Attribute
    Basics of HTML

    alignment attributes

    <html>
    <body>
    <h1 align="center">This is heading1</h1>
    <p>
    Attributes provides additional information to
    an HTML element.
    Attributes always come in name/value pairs
    like this name=“value”.
    <h2 align="right">This is heading2</h2>
    </p>
    </body>
    </html>
    20
    Basics of HTML

    Background color attributes


    <html>
    <head>
    <title>Home Page</title>
    </head>
    <body bgcolor="orange">
    <h1 align="center">This is heading1</h1>
    <p>
    Attributes provides additional information
    to an HTML element.
    Attributes always come in name/value
    pairs like this name=“value”.
    <h2 align="right">This is heading2</h2>
    </p>
    21 </body>
    </html>
    Basics of HTML

    Text formatting

    <html>
    <body>
    This is normal text<br>
    <b>This is bold text formating</b><br>
    <strong>This is strong text formating</strong> <br>
    <i>This is italic text formating</i><br>
    <del>This is bold text formating</del> <br>
    <ins>This is bold text formating</ins> <br>
    </body>
    </html>
    22
    Basics of HTML

    Text formatting
    <P> VS <pre>
    <body>
    <p>
    this is
    preformatted text.
    it preserve both space
    and line break
    </p>
    <pre>
    this is
    preformatted text.
    it preserve both space
    and line break
    23
    </pre>
    </body>
    Basics of HTML

    Text formatting

    <html>
    <body>
    <code> computer code</code>
    <br>
    <kbd>keyboard input</kbd>
    <br>
    <tt>teletype text</tt>
    <br>
    <samp>sample text</samp>
    <br>
    <var>computer variable</var>
    </body>
    24
    </html>
    Basics of HTML

    Text formatting

    <html>
    <body>
    <address>
    Kurdistan<br>
    Erbil<br>
    Soran<br>
    kawa street<br>
    </address>
    </body>
    </html>
    25
    Basics of HTML

    Text Direction

    <html>
    <body>
    <p>
    Here is some Hebrew text
    </p>
    <bdo dir="rtl">
    Here is some Hebrew text
    </bdo>
    </body>
    </html>
    26
    Basics of HTML

    Marquee & Quotation

    <html>
    <body>
    <q>
    here is short qoutation
    </q>
    <br>
    <marquee>
    <h1> Soran University <h1>
    </marquee>

    27
    </body>
    </html>
    Basics of HTML

    Marquee direction
    <html>
    <marquee>
    <h1> Soran University <h1>
    </marquee>
    <marquee direction="up">
    <h1> Soran University <h1>
    </marquee>
    <marquee direction="down">
    <h1> Soran University <h1>
    </marquee>
    <marquee direction="right">
    <h1> Soran University <h1>
    28 </marquee>
    </html>
    Fast Information

    • You may know that HTML stands for Hyper-Text Markup Language.
    • The Hyper-Text part refers to the fact that HTML allows you to create
    links that allow visitors to move from one page to another quickly and
    easily.
    • A markup language allows you to interpret text, and these
    interpretations provide additional meaning to the contents of a
    document.
    • If you think of a web page, we add code around the original text we
    want to display and the browser then uses the code to display the page
    29
    correctly.
    Summary

    • HTML pages are text documents.


    • HTML uses tags (characters that sit inside angled brackets) to give the
    information they surround special meaning.
    • Tags are often referred to as elements.
    • Tags usually come in pairs.
    • The opening tag denotes the start of a piece of content; the closing tag
    denotes the end.
    • Opening tags can carry attributes, which tell us more about the
    content of that element.
    • Attributes require a name and a value.
    30

    You might also like