, , and
Nothing Special   »   [go: up one dir, main page]
tags. It also covers common text formatting tags such as

,

-

, , , and as well as comments, attributes, and encoding text in different languages.">, , and tags. It also covers common text formatting tags such as

,

-

, , , and as well as comments, attributes, and encoding text in different languages.">
Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Web Design P3

    Uploaded by

    yodola1946
    This document provides an overview of HTML (Hypertext Markup Language) for creating web pages and applications. It discusses the basic elements and structure of an HTML document including the <html>, <head>, and <body> tags. It also covers common text formatting tags such as <p>, <h1>-<h6>, <b>, <i>, and <u> as well as comments, attributes, and encoding text in different languages.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Web Design P3

    Uploaded by

    yodola1946
    4 views33 pages
    This document provides an overview of HTML (Hypertext Markup Language) for creating web pages and applications. It discusses the basic elements and structure of an HTML document including the <html>, <head>, and <body> tags. It also covers common text formatting tags such as <p>, <h1>-<h6>, <b>, <i>, and <u> as well as comments, attributes, and encoding text in different languages.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of HTML (Hypertext Markup Language) for creating web pages and applications. It discusses the basic elements and structure of an HTML document including the <html>, <head>, and <body> tags. It also covers common text formatting tags such as <p>, <h1>-<h6>, <b>, <i>, and <u> as well as comments, attributes, and encoding text in different languages.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    4 views33 pages

    Web Design P3

    Uploaded by

    yodola1946
    This document provides an overview of HTML (Hypertext Markup Language) for creating web pages and applications. It discusses the basic elements and structure of an HTML document including the <html>, <head>, and <body> tags. It also covers common text formatting tags such as <p>, <h1>-<h6>, <b>, <i>, and <u> as well as comments, attributes, and encoding text in different languages.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 33

    Web programming

    HTML
    • HyperText Markup Language
    • Basic language for creating documents on the web, and
    for creating user interface for web applications
    • It is a markup language (not programming language)
    • HTML documents are in fact just a text files
    • Creating and modifying can be done in any text editor
    • File must follow certain version of HTML standard
    • Currently actual version is HTML version 5
    HTML
    HTML
    • Two basic elements – type declaration and HTML
    element itself
    • Type declaration gives information about the HTML
    version
    HTML
    • HTML element (frame) inside document forms the
    content, and it is consisted of header and body
    HTML
    • Tag <HTML> is a frame containing all other tags
    • Every HTML document starts with <HTML> and ends
    with </HTML>
    • Tag <HEAD> is frame for holding information about the
    document itself (title, description, key words) and where
    script language code is written (JavaScript)
    • Everything which we see in the browser window, the
    page content, is defined inside <BODY> frame
    HTML
    HTML
    • HTML document is consisted of elements (tags)
    – Opening tag <ELEMENT_NAME>
    – Closing tag </ELEMENT_NAME>
    • Together with the HTML element name, tag can also
    have certain number of attributes with values in ” ”
    • Element tells the browser what to do, and the attribute
    tells how to do it
    • There is no difference between small and large letters,
    but it is better to keep them small
    • Browser depends on the information given in tags to
    display the page
    • HTML code is realized in the order in which it was written
    HTML
    • Each element is consisted of paired or unpaired tags
    • Paired tags are marks which are used to set text or other
    object into the HTML page
    • Paired tags have opening and closing tag (introduced for
    easier code reading)
    • These marks must have symbol to start and symbol to
    close tag
    • <tag> and </tag>
    • Complete text or set of tags inside those two marks is
    translated just in context of this element
    • Every tag has defined graphical appearance
    HTML
    • First HTML page
    HTML
    HTML
    • Code can be written in any text editor
    • Recommendation – Notepad++ (http://notepad-
    plusplus.org/)
    • After creating code, file type should be set to HTML
    HTML
    • Lets take a look at the code
    • <!DOCTYPE html> declaration defines that this document is HTML5
    • <html> - root element of the HTML page
    • <head> holds meta information about the document
    • <title> defines title of the document
    • <body> visible content
    HTML
    • As we have already seen, HTML tags are surrounded by
    <>
    • Usually in pairs, for example <p> and </p>
    • Content is written inside:

    • For example:
    HTML
    • Some elements do not have content, and they are called
    empty elements
    • They don’t have end tag, for example line break
    <br/>, or some other examples: <hr/>, <input/>, <img/>…
    • Some elements can have nested other elements
    HTML
    • Comments exist in every programming language, and
    they are used to help developers with descriptions and
    notes
    • They are part of the web page, but not interpreted,
    therefore not shown to the user
    • Their main role is to help navigating inside the document
    • Comments are almost necessary when more than one
    people are developing the site, or when PHP approach is
    used
    • Syntax
    <! -- comment text -->
    HTML
    • Attributes are second building element of the HTML,
    together with tags
    • Attributes belong to a tag, and cannot be written
    separately
    • Attributes define with more details how to show tags in
    browser, they are not mandatory but sometimes very
    important
    • Different tags have different allowed attributes
    • Attribute names are predefined by HTML, together with
    their values, type and interval, except for String
    • They are written inside “ ”
    • One tag can have more than one attribute
    HTML
    • Tag <hr/> is used to add one horizontal line (1 to 2 mm
    height), with empty row before and after
    • It is possible to set height by using attribute size=“n” (n is
    number of pixels), width by attribute width=“n” and
    alignment with attribute align (possible values LEFT,
    RIGHT and CENTER)
    • Line length is absolute length, or percentage of width of
    whole screen
    • Example:
    <hr width=“100px”/>
    <hr width=“75%”/>
    <hr width=“25%”/>
    HTML
    <hr align="center" noshade size="5" width="150px" />
    HTML

    Working with text in HTML


    HTML
    • Default code set is English
    • If it is needed to show other characters, outside English
    letters, metatag can be used:
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8">

    • It is defined in head tag, and allows browser to correctly


    show special characters, for example Serbian Cyrillic
    and Latin letters
    HTML
    HTML
    • Text size can be defined with paired tags <h1> to <h6>
    • Defining text size is much more precise with CSS, but
    almost all web browsers are expecting H tags
    • Their primary purpose is to highlight titles and headers
    • There are tags H1, H2, H3, H4, H5 and H6
    • Tag H1 gives the largest letters, H6 the smallest
    • Every of those elements starts in new line, with some
    spare room added by browser
    • It is possible to add attribute align, to set horizontal
    alignment of the displayed text (values LEFT, CENTER,
    RIGHT)
    HTML
    HTML
    • Paragraphs are defined with <p> tag, starting with the
    new line
    HTML
    • Within the <p> tag, we can add attribute align, and
    define horizontal alignment of the paragraphs, with
    possible values LEFT, CENTER, RIGHT
    HTML
    • Entities are specially defined groups of characters, with
    defined interpretation in browser
    • They are used to show characteristic symbols
    • Because they are not shown as regular text, they are
    starting with & and ending with ;
    HTML
    • Text can be formatted as bold, italic or underline with
    tags
    – <b> text </b>
    – <i> text </i>
    – <u> text </u>
    HTML
    • Tag font can be used to format text
    • <font color=“color”>
    • <font size=“size”>
    • <font face=“name”>
    • Color can be English word for color or hexadecimal code
    such as green, blue, #008000, #FFFF00
    • Size can be number from -7 to 7
    • Font name is some of defined fonts like Arial,
    Helvetica…
    HTML
    • Additional tags for text formatting
    • <cite></cite> Highlighted quotes
    • <q></q> Quotations
    • <sub></sub> index, subscript
    • <sup></sup> exponent, superscript
    • • <em></em> cursive
    • • <strong></strong> black cursive around letters
    • • <blockquote></blockquote> quotes
    HTML
    • Color is defined through attribute color, or bgcolor
    • It can be defined as English word (blue, yellow…) or as a
    hexadecimal number
    • Hexadecimal number is much more precise
    HTML
    HTML

    You might also like