HTML Basics - HTML, Text, Images, Tables, Forms
HTML BasicsHTML, Text, Images, TablesDipen [email protected]
https://www.youtube.com/channel/UChvhhqqFl23yYwq54ykoOQQ
Table of ContentsIntroduction to HTMLHow the Web Works?What is a Web Page?My First HTML PageBasic Tags: Hyperlinks, Images, FormattingHeadings and ParagraphsHTML in DetailsThe DeclarationThe Section: Title, Meta, Script, Style2
Table of Contents (2)HTML in DetailsThe SectionText Styling and Formatting TagsHyperlinks: , Hyperlinks and SectionsImages: Lists:
and The and elementsHTML TablesHTML Forms3
How the Web Works?WWW use classical client / server architectureHTTP is text-based request-response protocol4
Page 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 BasicsText, Images, Tables, Forms
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 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##
First HTML Page10
My First HTML Page This is some text...
test.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.*10##
My First HTML Page This is some text...
First HTML Page: Tags11Opening tagClosing tagAn HTML element consists of an opening tag, a closing tag and the content inside.
*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.*11##
My First HTML Page This is some text...
First HTML Page: Header12HTML header
*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.*12##
My First HTML Page This is some text...
First HTML Page: Body13HTML body
*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.*13##
Some Simple TagsHyperlink Tags
Image Tags
Text formatting tags14Link to Telerik Web site
This text is emphasized.
new line
This one is more emphasized.
*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.*14##
Some Simple Tags Example15
Simple Tags Demo
This is a link.
Bold and italic text.
some-tags.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.*15##
Some Simple Tags Example (2)16
Simple Tags Demo
This is a link.
Bold and italic text.
some-tags.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.*16##
Tags AttributesTags can have attributesAttributes specify properties and behaviorExample:
Few attributes can apply to every element:id, style, class, titleThe id is unique in the documentContent of title attribute is displayed as hint when the element is hovered with the mouseSome elements have obligatory attributes17
Attribute alt with value "logo"
Headings and ParagraphsHeading Tags (h1 h6)
Paragraph Tags
Sections: div and span18This is my first paragraphThis is my second paragraphHeading 1Sub heading 2Sub heading 3
This is a div
*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.*18##
Headings and Paragraphs Example 19
Headings and paragraphs Heading 1 Sub heading 2 Sub heading 3
This is my first paragraph This is my second paragraph
This is a div
headings.html
Headings and paragraphs Heading 1 Sub heading 2 Sub heading 3
This is my first paragraph This is my second paragraph
This is a div
Headings and Paragraphs Example (2)20headings.html
Introduction to HTMLHTML Document Structure in Depth
*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.*21##
PrefaceIt is important to have the correct vision and attitude towards HTMLHTML is only about structure, not appearanceBrowsers tolerate invalid HTML code and parse errors you should not.
22
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##
The Tag Example30
JavaScript Example function sayHello() { document.write("Hello World!"); } sayHello();
scripts-example.html
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