4. html css javascript basics

225
HTML Basics HTML, Text, Images, Tables Nikolay Kostov Telerik Corporation www.telerik. com

Upload: theanuuradha1993gmai

Post on 31-Dec-2015

44 views

Category:

Documents


4 download

TRANSCRIPT

HTML Basics - HTML, Text, Images, Tables, Forms

Table of Contents (2)HTML in DetailsThe SectionText Styling and Formatting TagsHyperlinks: , Hyperlinks and SectionsImages: Lists:

  1. ,
  • and The and elementsHTML TablesHTML Forms3How the Web Works?WWW use classical client / server architectureHTTP is text-based request-response protocol4Page requestClient running a Web BrowserServer running Web Server Software (IIS, Apache, etc.)Server responseHTTPHTTP

    *07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*4##What is a Web Page?Web pages are text files containing HTMLHTML Hyper Text Markup LanguageA notation for describingdocument structure (semantic markup)formatting (presentation markup)Looks (looked?) like:A Microsoft Word documentThe markup tags provide information about the page content structure5*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*5##Creating HTML PagesAn HTML file must have an .htm or .html file extensionHTML files can be created with text editors:NotePad, NotePad ++, PSPadOr HTML editors (WYSIWYG Editors):Microsoft FrontPageMacromedia DreamweaverNetscape ComposerMicrosoft WordVisual Studio6*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*6##HTML StructureHTML is comprised of elements and tagsBegins with and ends with Elements (tags) are nested one inside another:

    Tags have attributes:

    HTML describes structure using two main sections: and 8

    *07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*8##HTML BasicsText, Images, Tables, Forms

    HTML Code FormattingThe HTML source code should be formatted to increase readability and facilitate debugging.Every block element should start on a new line.Every nested (block) element should be indented.Browsers ignore multiple whitespaces in the page source, so formatting is harmless.For performance reasons, formatting can be sacrificed9*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*9##The DeclarationHTML documents must start with a document type definition (DTD)It tells web browsers what type is the served codePossible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5Example:

    See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes23

    *07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*23##HTML vs. XHTMLXHTML is more strict than HTMLTags and attribute names must be in lowercaseAll tags must be closed (
    , ) while HTML allows
    and and implies missing closing tags (par1 par2)XHTML allows only one root element (HTML allows more than one)24

    XHTML vs. HTML (2)Many element attributes are deprecated in XHTML, most are moved to CSS Attribute minimization is forbidden, e.g.

    Note: Web browsers load XHTML faster than HTML and valid code faster than invalid!25

    The SectionContains information that doesnt show directly on the viewable pageStarts after the declarationBegins with and ends with Contains mandatory single tagCan contain some other tags, e.g.

    26*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*26## Section: tagTitle should be placed between and tags

    Used to specify a title in the window title barSearch engines and people rely on titles27Telerik Academy Winter Season 2009/2010

    *07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*27## Section: Meta tags additionally describe the content contained within the page28

    *07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*28## Section: The element is used to embed scripts into an HTML documentScript are executed in the client's Web browserScripts can live in the and in the sectionsSupported client-side scripting languages:JavaScript (it is not Java!)VBScriptJScript29*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*29## Section: The element embeds formatting information (CSS styles) into an HTML page31

    p { font-size: 12pt; line-height: 12pt; } p:first-letter { font-size: 200%; } span { text-transform: uppercase; } Styles demo.
    Test uppercase.

    style-example.html*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*31##Comments: TagComments can exist anywhere between the tagsComments start with 32