web design w3schools
TRANSCRIPT
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 1/13
Ordered by FunctionDTD: indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset
Tag Description DT
Basic
<!DOCTYPE> Defines the document type ST
<html> Defines an HTML document ST
<body>
Defines the document's body ST<h1> to <h6> Defines HTML headings ST
<p> Defines a paragraph ST
<br /> Inserts a single line break ST
<hr /> Defines a horizontal line ST
<!--...--> Defines a comment ST
Formatting
<acronym> Defines an acronym ST<abbr> Defines an abbreviation ST
<address> Defines contact information for the author/owner of adocument
ST
<b> Defines bold text ST
<bdo> Defines the text direction ST
<big> Defines big text ST
<blockquote> Defines a long quotation ST<center> Deprecated. Defines centered text TF
<cite> Defines a citation ST
<code> Defines computer code text ST
<del> Defines deleted text ST
<dfn> Defines a definition term ST
<em> Defines emphasized text ST
<font> Deprecated. Defines font, color, and size for text TF
<i> Defines italic text ST
<ins> Defines inserted text ST
<kbd> Defines keyboard text ST
<pre> Defines preformatted text ST
<q> Defines a short quotation ST
<s> Deprecated. Defines strikethrough text TF
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 2/13
<samp> Defines sample computer code ST
<small> Defines small text ST
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text ST
<sub> Defines subscripted text ST
<sup> Defines superscripted text ST
<tt> Defines teletype text ST
<u> Deprecated. Defines underlined text TF
<var> Defines a variable part of a text ST
<xmp> Deprecated. Defines preformatted text
Forms
<form> Defines an HTML form for user input ST
<input /> Defines an input control ST<textarea> Defines a multi-line text input control ST
<button> Defines a push button ST
<select> Defines a select list (drop-down list) ST
<optgroup> Defines a group of related options in a select list ST
<option> Defines an option in a select list ST
<label> Defines a label for an input element ST
<fieldset> Defines a border around elements in a form ST<legend> Defines a caption for a fieldset element ST
<isindex> Deprecated. Defines a searchable index related to adocument
TF
Frames
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<noframes>
Defines an alternate content for users that do notsupport frames
TF
<iframe> Defines an inline frame TF
Images
<img /> Defines an image ST
<map> Defines an image-map ST
<area /> Defines an area inside an image-map ST
Links
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 3/13
<a> Defines an anchor ST
<link /> Defines the relationship between a document and anexternal resource
ST
Lists
<ul> Defines an unordered list ST
<ol> Defines an ordered list ST
<li> Defines a list item ST
<dir> Deprecated. Defines a directory list TF
<dl> Defines a definition list ST
<dt> Defines a term (an item) in a definition list ST
<dd> Defines a description of a term in a definition list ST
<menu> Deprecated. Defines a menu list TF
Tables
<table> Defines a table ST
<caption> Defines a table caption ST
<th> Defines a header cell in a table ST
<tr> Defines a row in a table ST
<td> Defines a cell in a table ST
<thead> Groups the header content in a table ST
<tbody>
Groups the body content in a table ST<tfoot> Groups the footer content in a table ST
<col /> Defines attribute values for one or more columns in atable
ST
<colgroup> Defines a group of columns in a table for formatting ST
Styles
<style> Defines style information for a document ST
<div> Defines a section in a document ST
<span> Defines a section in a document ST
Meta Info
<head> Defines information about the document ST
<title> Defines the document title ST
<meta> Defines metadata about an HTML document ST
<base /> Defines a default address or a default target for all linkson a page
ST
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 4/13
<basefont /> Deprecated. Defines a default font, color, or size for thetext in a page
TF
Programming
<script> Defines a client-side script ST
<noscript> Defines an alternate content for users that do notsupport client-side scripts
ST
<applet> Deprecated. Defines an embedded applet TF
<object> Defines an embedded object ST
<param /> Defines a parameter for an object ST
HTML / XHTML Standard Attributes The attributes listed below are standard, and are supported by all HTML and XHTML tags, with afew exceptions.
Core AttributesNot valid in base, head, html, meta, param, script, style, and title elements.
Attribute Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element
Language Attributes
Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.Attribute Value Description
dir ltr
rtl
Specifies the text direction for the content in an element
lang language_code Specifies a language code for the content in an element.Language code
reference
xml:lang language_code Specifies a language code for the content in an element, in XHTML
documents.Language code reference
Keyboard AttributesAttribute Value Description
accesskey character Specifies a keyboard shortcut to access an element
tabindex number Specifies the tab order of an element
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 5/13
Standard Event AttributesHTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on anelement.To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial. Below is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions.
<body> and <frameset> EventsThe two attributes below can only be used in <body> or <frameset>:
Attribute Value Description
onload script Script to be run when a document load
onunload script Script to be run when a document unload
Form EventsThe attributes below can be used in form elements:
Attribute Value Description
onblur script Script to be run when an element loses focus
onchange script Script to be run when an element change
onfocus script Script to be run when an element gets focus
onreset script Script to be run when a form is reset
onselect script Script to be run when an element is selected
onsubmit script Script to be run when a form is submitted
Image EventsThe attribute below can be used with the img element:
Attribute Value Description
onabort script Script to be run when loading of an image is interrupted
Keyboard EventsValid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
Attribute Value Description
onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released
Mouse EventsValid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
Attribute Value Descriptiononclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
onmouseout script Script to be run when mouse pointer moves out of an element
onmouseover script Script to be run when mouse pointer moves over an element
onmouseup script Script to be run when mouse button is released
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 6/13
Web Building Introduction Every Web developer has to know the building blocks of the Web:
HTML 4.01
CSS
XHTML
XML and XSLT
JavaScript
ASP or PHP
Managing data with SQL
The future of the Web
HTML 4.01HTML is the language of the Web, and every Web developer should have a basic understanding of it.
HTML 4.01 is an important Web standard, and very different from HTML 3.2.
When tags, like <font> and color attributes, were added to HTML 3.2, it started a developer's nightmare. Developmentweb sites where font information must be added to every single Web page is a long and expensive job.
With HTML 4.01, all formatting can be moved out of the HTML document, and into a separate style sheet.
HTML 4.01 is also important because XHTML 1.0 is HTML 4.01 "reformulated" as an XML application. Using HTML 4.01 your pages makes the future upgrade from HTML to XHTML a very simple process.
Make sure you use the latest HTML 4.01 standard.
CSS - Cascading Style Sheets
Styles define how HTML elements should be displayed, just like the <font> tag in HTML 3.2.
Style sheets are normally saved in external files. External style sheets enable you to change the appearance and layou
of EVERY page in your Web site, just by editing a single document. If you have ever tried changing something like thefont or color of all the headings in all your HTML pages, you will understand how CSS can save a lot of work!
XHTML
XHTML stands for Extensible HyperText Markup Language.
XHTML is a reformulation of HTML 4.01 in XML, and is supported in all major browsers.
To prepare for the future: Read how W3Schools.com was converted to XHTML
XML - A Tool for Describing Data
XML is NOT a replacement for HTML. XML describes data, while HTML displays the data.
XML is as a cross-platform, software-, and hardware-independent tool for storing and transmitting information.
We believe that XML is as important to the Web as HTML was to the foundation of the Web, and that XML will be themost common tool for all data manipulation and data transmission.
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 7/13
XSLT - A Tool for Transforming DataXSLT is used to transform XML documents into other formats, like HTML, WML, etc.
XSLT can transform an XML file into a format that is recognized by a browser.
XSLT can also add HTML elements, rearrange and sort data, make decisions about which data to display, and more.
JavaScript - Client-Side Scripting
Client-side scripting is about "programming" the behavior of a browser.
To deliver more dynamic web content, you should teach yourself JavaScript.
JavaScript gives HTML designers a programming tool
JavaScript can put dynamic text into an HTML page
JavaScript can react to events
JavaScript can change HTML elements
JavaScript can be used to validate data
ASP or PHP - Server-Side ScriptingServer-side scripting is about "programming" an Internet server.
To deliver more dynamic web content, you should teach yourself server-side scripting.
With server-side scripting, you can:
Dynamically edit, change, or add any content of a Web page
Respond to user queries and form data
Access databases and return the result to a browser
Access files and return the result to a browser
Transform XML data to HTML data and return the results to a browser
Customize a Web page to make it more useful for individual users
Provide security and access control to Web pages
Tailor your output to different types of browsers
Minimize network traffic
Managing Data with SQLSQL is the standard language for accessing and manipulating databases.
SQL is used to access and manipulate data in MySQL, SQL Server, MS Access, Oracle, Sybase, DB2, and other databassystems.
Knowledge of SQL is a must for anyone wanting to store or retrieve data from a database.
What Will the Future Bring?One important thing to know is that the functionality of Web Sites will change very drastically. We will see a huge shift
from sites displaying "static content" to data driven sites delivering "dynamic content".
We will also see new browsers, like the browsers found in mobile devices. We will also see more use of XML fortransmitting data between servers, or between servers and browsers.
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 8/13
Web Building Site Design
Designing Web sites needs careful thinking and a lot of planning.The most important thing is to KNOW YOUR AUDIENCE.
Users are ScannersA typical visitor will NOT read the entire content of your Web page!
No matter how much useful information you put into a Web page, a visitor will only spend a few seconds scanning itbefore they decide whether to leave or to stay.
Be sure to make your point in the very first sentence of the page! After that, try to keep the user occupied with shortparagraphs, and new headers down the page.
Less is More
Keep the paragraphs as short as possible.
Keep the pages as short as possible.
Keep the chapters as short as possible.
Use a lot of space! Pages overloaded with text will kill your audience.
If you have a lot to say, break your information into smaller chunks and place it on different pages!
NavigationCreate a consistent navigation structure that is used by all the pages in your Web site.
Don't use hyperlinks inside paragraphs, to send visitors to every page of your Web. This will destroy the feeling of aconsistent navigation structure.
If you must use hyperlinks, add them to the bottom of a paragraph, or to the menu.
Download Speed
Sometimes developers are not aware of the fact that some pages take a long time to download.
Most visitors will leave a Web page that takes more than 7 seconds to download.
Test your web pages over a low-speed modem connection. If your pages take a long time to download, considerremoving graphic or multimedia content.
Let your Audience Speak!
Feedback is a very good thing!
Your visitors are your "customers". Often they will give you some valuable hints about what you could have done bette
Provide a simple way to reach you, and you will get a lot of input from people with different skills and knowledge.
Web Building Site Users
Your visitors use different hardware and software.
The important thing is to KNOW YOUR AUDIENCE.
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 9/13
Visitor's MonitorNot everyone on the internet has the same monitor as you.
If you design a Web site to be displayed on a monitor with a 1024x768 resolution, visitors with lower resolution monito(like 800x600) might have problems reading your pages.
Make sure you test your Web site on different monitors.
Take a look at our browser display statistics to see the trends in monitor development.
What Browsers Do They Use?
Don't forget to test your Web site on different browsers.
The most popular browsers today are Internet Explorer and Firefox.
One wise thing to do when designing Web pages is to use correct HTML (or XHTML). Strict and correct coding will help browser to display your pages correctly.
Take a look at our browser statistics to see the trends in browser development.
What Plug-Ins Do They Have?
Sound, video clips, or other multimedia content might require the use of separate programs (plug-ins).
Be sure that your visitors have access to the software needed to view them.
What About Disabilities?
Some people have viewing or hearing disabilities.
They might try to read your pages with Braille or speech-based browsers. Always add text alternatives for pictures and
graphic elements.
Web Standard
Web standards make Web development easier.
Why Web Standards?
To make internet a better place, for both developers and end-users, it is important that both browsers and Web
developers follow the Web standards.
When developers follow the Web standards, the development is simplified, since it is easier for a developer to understaanother's coding.
Using Web standards will help you to ensure that all browsers, will display your Web site properly, without frequent antime-consuming rewrites.
Web pages that conforms to the standard are easier for search engines to access and index, easier to convert to otherformats, and easier to access with program code (like JavaScript and the DOM).
Tip: Make a habit of validating your pages with a validation service. Validation keeps your documents up to thestandards, and free for errors.
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 10/13
CSE HTML Validator for Windows
Fast, Powerful, Customizable, and Offline HTML, CSS, Accessibility, SEO,and Link Checking.
Super-fast offline HTML, CSS, link, and more checking
Built-in editor lets you easily find and fix problem
Search engine checking (SEO) to help improve rankings
Checks for issues that other validators don't
Accessibility checking, including WCAG 2.0 Check everything with just one click or keypress
Customize the message output to your needs
Check an entire site with the Batch Wizard
Easily check the output of dynamic pages
Prices start at just $69, and a free trial is available
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 11/13
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 12/13
Solving the Problem
For Windows 2000 users:
You can solve your security problem by disabling NetBIOS over TCP/IP:
Open Windows Explorer
Right-click on My Network Places
Select: Properties
Right-click on Local Area Network
Select: Properties
Select: Internet Protocol TCP/IP
Click on Properties
Click on Advanced
Select the WINS tab
Select Disable NetBIOS over TCP/IP
Click OK
If you get the message: "This connection has an empty......", ignore the message and click on YES to continue, and cliOK to close the other setup windows.
You should restart your computer after the changes.
For Windows 95, 98, or ME users:
You can solve your security problem by disabling NetBIOS over TCP/IP:
Open Windows Explorer
Right-click on My Network Places
Select: Properties
Select: Internet Protocol TCP/IP
Click on Properties
Select the NetBIOS tab
Uncheck: Enable NetBIOS over TCP/IP
Click OK
You must also disable the TCP/IP Bindings to Client for Microsoft Networks and File and Printer Sharing:
Open Windows Explorer
Right-click on My Network Places
Select: Properties
Select: Internet Protocol TCP/IP
Click on Properties
Select the Bindings tab
Uncheck: Client for Microsoft Networks
Uncheck: File and Printer Sharing
Click OK
If you get a message with something like: "You must select a driver.........", ignore the message and click on YES tocontinue, and click OK to close the other setup windows.
If you still want to share your Files and Printer over the network, you must use the NetBEUI protocol instead of theTCP/IP protocol. Make sure you have enabled it for your local network:
Open Windows Explorer
Right-click on My Network Places
Select: Properties
Select: NetBEUI
Click on Properties
Select the Bindings tab
8/2/2019 Web Design W3Schools
http://slidepdf.com/reader/full/web-design-w3schools 13/13
Check: Client for Microsoft Networks
Check: File and Printer Sharing
Click OK
You should restart your computer after the changes.
Protect Your Server
iisPROTECT provides a complete range of password protection, authentication and user management solutions:
iisPROTECTasp: Protect areas of your web site and require username and password. Grant/deny any users/groups on aper resource basis. Extensive Web Interface for user/group admin, use any DB backend, store custom data, set userstart/end dates, email users, audit logins.
iisPROTECT: Protect all web site files including images, databases,html,ASP etc. Protect entire directories, users / grouindependent from Windows accounts, complete web administration, does not require cookies or any programming.Complete turn key solution.
iisPROTECTquota: All of the features of iisPROTECT plus: prevent concurrent logins and password cracking attempts, squotas on hits, logins, kb per user.
Read more about iisPROTECT