creating web pages using html -...
Post on 20-Oct-2020
1 Views
Preview:
TRANSCRIPT
-
Creating Web Pages Using HTML
-
HTML Commands
Commands are called tags Each tag is surrounded by Some tags need ending tags containing / Tags are not case sensitive, but for future
compatibility, use lower case Indentation and spacing are used to make the
code more readable
-
Basic Structure
The html tags begin and end the document.
The head tags contain information about the web page and should appear only once.
The body tags contain the visible part of the web page and appear only once.
-
Creating your HTML file
Notepad++
Save your file by choosing Save As
Give your file a simple name and use
the .html extension
Change the Save As Type to All Files
-
An HTML 5 Template
Template
Hello World
Be careful when using copy/paste. HTML docs need straight quotes!
-
Viewing your file in a browser Launch the Browser From the File menu, choose Open Click the Browse button Locate your html file
Be sure to check in different browsers!
-
Viewing changes As you work on your file in Notepad++, you can simply
Save any changes once your file is named correctly. If the page is loaded in the Browser already, click the
Refresh button to see the changes.
-
Entering Text Enter text in the body section with the following optional
tags: Line break:
Paragraph tags insert white space:Heading tags Select heading size: h1 through h6 Use a corresponding ending tag
is the largest or are normal is the smallest
-
Example
Template
Here is a sample
web pageIt uses paragraph tags
and heading tags
-
Titles The section of an HTML document contains
information about the page The tags are placed in the
section to give the page a name. The text contained between the tags will appear in the title bar of the browser
Formatting has no effect Additional information in the section might
be keywords for searching, meta information or comments, for example.
-
Some Style Elements Strong: … Italics (emphasis): … Underline: …
Tags may be nested as follows:
CSC455
But don’t allow them to cross:
CSC455 >
-
Lists Ordered lists are numbered:
OneTwoThree
The li tag stands for list item
The HTML at the leftcreates the following list:
1. One2. Two3. Three
-
More Lists Unordered lists are bulleted:
OneTwoThree
The HTML at the leftcreates the following list:
• One• Two• Three
-
Adding Graphics Graphics files typically end in .gif or.jpg Copy and paste doesn’t work The image file must be saved, usually in an images
folder in the same directory as the html file Use the following tag:
where filename.xxx is the name of your image file
If images are in a folder (a common practice):
-
More about graphics You should include alternative text for users who can’t or
don’t want to load images:
You may also include width and height values in pixels (screens are usually 800x600 and up):
-
Creating Links To create a link to another URL use the tag: Text You can also link to another local HTML file instead: Text The Text is what the user should click on to go to the
URL (Note: this could be an img src tag instead)
-
Tables The entire table is contained between the
tags
Rows are indicated with the tags
Cell contents may be contained in either Heading tags or Data tags:
Indentation helps outline the structure of the table
-
Example
Heading 1 Heading 2
Cell 1 Cell 2
Cell 3 Cell 4
Heading 1 Heading 2
Cell1 Cell2
Cell3 Cell4
-
Forms: Input Structures
action is the name of the file that will process the data method is "get" or "post"
-
Form Text Boxes
name assigns the identifier that will store the data when it is processed
Example:
Username:
-
Radio (Option) Buttons button one
button twoOnly ONE may be selected names should all match each other values should be distinct - this is what will be submitted
when the form is processed The text before the
tag will be displayed next to(after) the button
-
Check Boxes
-
Selection List
text1 text2 text3
…
-
Buttons
where "text" is what you choose to appear on the button
-
Sample Data Sent to Server (GET) http://www.thelighthouse.org/cgi-
bin/donation?eMail=donations@thelighthouse.org&addressType=business&firstName=Bob&lastName=Jones&phone=9627567&street=601+S.+College+Rd&city=Wilmington&state=NC&zip=28409&amount=%24100&creditCard=MC&cardHolder=Bob+Jones&cardNumber=1111222233334444&expMonth=01&expYear=2011&volunteer=on&comments=Please+send+a+receipt
-
For additional information The following websites may be useful:
http://www.html-form-guide.com/html-form/html-form-input.html
http://www.w3schools.com/html/html_forms.asp
http://html.about.com/
http://www.html-form-guide.com/html-form/html-form-input.htmlhttp://www.w3schools.com/html/html_forms.asphttp://html.about.com/
Slide Number 1HTML CommandsBasic StructureCreating your HTML fileAn HTML 5 TemplateViewing your file in a browserViewing changesEntering TextExample TitlesSome Style ElementsListsMore ListsAdding GraphicsMore about graphicsCreating Links TablesExampleForms: Input StructuresForm Text BoxesRadio (Option) ButtonsCheck BoxesSelection ListButtonsSample Data Sent to Server (GET)For additional information
top related