Embed Size (px)
Citation preview
THE BACKBONE OF EVERY WEB PAGE
HTML Day 1
What will we learn?
How to create a basic web page
Backgrounds and colorsHow to link Web sitesHow to include graphicsLet’s start with the basics
First Step in Web Design:
Plan!Create an outline
list of elements, links, graphics,
Do a “little bit” Save – Test (Preview)Do a little moreSave – Test (Preview)
HTML
HyperText Markup LanguageAll types of computers can interpret HTML code (PC, MAC, Linux, and Unix)
In many languages
Where do I write HTML code?
Any word processor will work!We will use Notepad
Saving an HTML Document
Must save file as:Filename.htm
ORFilename.html
How does HTML Work?
Series of tags that surrounds and controls text.
Examples of tags:<html><h1><b>
How does HTML Work?
Tags: Code words or letters in <brackets> designed to create what you see on a web page.
<HTML><HEAD><TITLE>The Nomad Catalog</TITLE></HEAD><BODY><H1>The Nomad on-line catalog!</H1>Welcome to the Nomad Ltd on-line catalog. <p> We are pleased to offer a new line of clothing called "Web Wear“!<H2>Enjoy browsing through our catalog!</H2><A HREF=“Nomad2.htm”>Order now</A> to get Web Wear fast.</BODY></HTML>
What should I know about Tags??
Not case sensitive<html> or <HTML>
Enclosed in brackets: < >(Shift key + comma or period)
To end a tag you must type: </ >
After an equal sign you need quotation marks. =“red”
Basic HTML Tags:
<HTML> </HTML>Identifies an HTML document to the browser
<HEAD> </HEAD>Document information
Basic HTML Tags:
<TITLE> </TITLE>Indicates what appears in the blue title bar
<BODY> </BODY>Information that appears in main portion of the display window.
The Body Tag <BODY>
Includes:TextLinksGraphicsMoviesSoundsAnimations
<HTML><HEAD><TITLE>My Practice Page</TITLE></HEAD><BODY>
Welcome to my Practice Page!
</BODY></HTML>
Info appears in title bar!
Text Color
<BODY TEXT=“RED”> Put text information inside the body tagChanges color of text through entire document.
Note: HTML does not recognize all colors – use trial and error or the HTML color codes.
Background Color
<BODY BGCOLOR=“BLACK”> Or
<BODY BGCOLOR=“000033”> Changes the documents background color
Background Color
HTML color codes are hexadecimal triplets representing the colors red, green, and blue (#RRGGBB). For example, in the color red, the color code is #FF0000, which is '255' red, '0' green, and '0' blue. These color codes can be used to change the color of the background, text, and tables on a web page.
The Paragraph Tag <P>
<P> Creates new Paragraph
HTML will not recognize pressing the enter key
No ending tag is needed
Six Heading (Font) Sizes
<H1></H1>Biggest<H2></H2><H3></H3><H4></H4><H5></H5><H6></H6>Smallest
Text Styles
<B> BOLD </B> <U> UNDERLINE </U>
< I > ITALICIZE </I>
Ordered List:<OL> & </OL>
<OL> <LI>Pepsi</LI><LI>Dr. Pepper</LI><LI>Mt. Dew</LI><LI>Coke</LI></OL>
Ordered List:<OL> & </OL>
In Internet Explorer:1.Pepsi2.Dr. Pepper3.Mt. Dew4.Coke
Unordered (Bulleted) List: <UL> & </UL>
<UL><LI>Hamburger</LI><LI>Pepperoni</LI><LI>Cheese</LI><LI>Veggie</LI></UL>
Unordered (Bulleted) List: <UL> & </UL>
In Internet Explorer:HamburgerPepperoniCheeseVeggie
Linking Documents
Links or hyperlinksAllow you to jump to other Web sitesDisplayed in a different colorUnderlinedMouse turns to a hand when held over link
Hyperlink Tag
Link to a web page<A HREF=“http://www.webaddress”>Type here what you want blue and underlined</A>
Hyperlink Review
Most commonly used search engine is <A HREF=“http://www.google.com”> Google</A>!
In Internet Explorer:
Most commonly used search engine is Google!
Inserting a Graphic
All graphics must be saved to your Network Drive.
Do not save to the desktop.
Do not copy and paste.
Inserting a Graphic
<IMG SRC =“GRAPHICS/FILENAME.JPG”>Image is saved in a Folder named GraphicsImage filenames CAN BE case sensitive!
<IMG SRC =“Graphics/falcon.jpg”>
Key Tips
Proofread! Proofread! Proofread!Little errors cause big problems in HTML. < > “ “ </ >
Pay attention to detail!Keep your notes they will help you with your project.
![[320] Web 1: Selenium · Page A Page B Page C Page D how to scrape a webpage graph? how to scrape a complicated page?](https://img.dokumen.tips/doc/110x75/6039986564b34c71e02207cb/320-web-1-selenium-page-a-page-b-page-c-page-d-how-to-scrape-a-webpage-graph.jpg)
