Intro to HTML Basics
23
Intro to HTML Basics Intro to HTML Basics HTML = Hypertext Mark-up HTML = Hypertext Mark-up Language Language HTML is a plain-text file that HTML is a plain-text file that can be created using a text can be created using a text editor like Notepad. editor like Notepad. When creating HTML files for the When creating HTML files for the web, make sure you save them web, make sure you save them as .html – or they won’t work. as .html – or they won’t work.
description
Intro to HTML Basics. HTML = Hypertext Mark-up Language HTML is a plain-text file that can be created using a text editor like Notepad. When creating HTML files for the web, make sure you save them as .html – or they won’t work. Overview: Tags. - PowerPoint PPT Presentation
Transcript of Intro to HTML Basics
Intro to HTML BasicsIntro to HTML Basics HTML = Hypertext Mark-up LanguageHTML = Hypertext Mark-up Language HTML is a plain-text file that can be HTML is a plain-text file that can be
created using a text editor like created using a text editor like Notepad.Notepad.
When creating HTML files for the When creating HTML files for the web, make sure you save them web, make sure you save them as .html – or they won’t work.as .html – or they won’t work.
Overview: TagsOverview: Tags As a text document, your HTML in Notepad As a text document, your HTML in Notepad
will contain will contain elementselements, such as headers, , such as headers, titles, paragraphs, etc.titles, paragraphs, etc.
These elements must be denoted in your These elements must be denoted in your script, which is done using script, which is done using tagstags
HTML tags consist of a left angle bracket HTML tags consist of a left angle bracket (<), a name, and a right angle bracket (>)(<), a name, and a right angle bracket (>)
For example: <title>For example: <title> Tags must also close. To do so, you Tags must also close. To do so, you
incorporate a slash (/). A starting and incorporate a slash (/). A starting and ending tag would be: <title> </title>ending tag would be: <title> </title>
More TagsMore Tags Any HTML document should contain Any HTML document should contain
certain tags:certain tags:-<html>-<html>-<title>-<title>-<body>-<body>-headings (such as <H1>)-headings (such as <H1>)-<paragraph>-<paragraph>
Adding Attributes to TagsAdding Attributes to Tags You can add attributes to tags to You can add attributes to tags to
enhance your page.enhance your page. Added attributes go inside the Added attributes go inside the
brackets of the opening tag brackets of the opening tag (example: <p align=center> would (example: <p align=center> would center the paragraph)center the paragraph)
A list of attributes can be found at A list of attributes can be found at http://archive.devx.com/projectcool/dhttp://archive.devx.com/projectcool/developer/reference/tag-table.htmleveloper/reference/tag-table.html
ColorsColors Background and text colors are attributes Background and text colors are attributes
of the “body” of the document.of the “body” of the document. text=“#xxxxxx” determines your text text=“#xxxxxx” determines your text
colorcolor Bgcolor=“#xxxxxx” determines your Bgcolor=“#xxxxxx” determines your
background colorbackground color Colors and codes for HTML can be found at Colors and codes for HTML can be found at
http://hotwired.lycos.com/webmonkey/refehttp://hotwired.lycos.com/webmonkey/reference/color_codes/ rence/color_codes/
ListsLists Lists are found inside the body, and Lists are found inside the body, and
are written as “<ul>” for an are written as “<ul>” for an unordered list, or “<ol>” for an unordered list, or “<ol>” for an ordered (or numbered) list.ordered (or numbered) list.
List items are denoted by “<li>” and List items are denoted by “<li>” and do not require closing tags.do not require closing tags.
LinksLinks The biggest thing that made HTML so The biggest thing that made HTML so
popular was its ability to link to other popular was its ability to link to other documents or sections of documents.documents or sections of documents.
A link is indicated by <a> (anchor).A link is indicated by <a> (anchor). The text that will become the link is The text that will become the link is
identified with by <href> (hyperlink identified with by <href> (hyperlink reference).reference).
More LinksMore Links An example link would be: <a An example link would be: <a
href=“document.html”>Link to href=“document.html”>Link to document</a>document</a>
This would make the phrase “Link to This would make the phrase “Link to document” a hyperlink to document” a hyperlink to “document.html” assuming that it is in the “document.html” assuming that it is in the same directory as your current file.same directory as your current file.
If the document is in a different directory, If the document is in a different directory, you need to include it in the path. For you need to include it in the path. For example: example: <a href=“extracrap/document.html”><a href=“extracrap/document.html”>
More LinksMore Links If you wish to make an external link, you If you wish to make an external link, you
have to write out the full URL. I have to write out the full URL. I recommend opening the page you want in recommend opening the page you want in a browser, then copying and pasting the a browser, then copying and pasting the URL. This prevents you from unnecessary URL. This prevents you from unnecessary typing or messing up.typing or messing up.
For example: <a For example: <a href=“http://www.theonion.com/onion390href=“http://www.theonion.com/onion3902/index.html”>2/index.html”>
Just make sure that when you paste it in, Just make sure that when you paste it in, you add the quotes (“”).you add the quotes (“”).
The href mailto: functionThe href mailto: function Another function of href can be to Another function of href can be to
provide users with an opportunity to provide users with an opportunity to send you e-mail.send you e-mail.
An example: <a An example: <a href=“mailto:[email protected]”>href=“mailto:[email protected]”>
The full text, with something to link The full text, with something to link the function to would be: <a the function to would be: <a href=“mailto:[email protected]”>href=“mailto:[email protected]”>Send me an e-mail</a>Send me an e-mail</a>
Adding ImagesAdding Images I suggest you make a folder for images in I suggest you make a folder for images in
your directory – it will make it easier to your directory – it will make it easier to refer to things.refer to things.
The <image src=“??????”> tag will allow The <image src=“??????”> tag will allow you to insert an image. ??????? Should be you to insert an image. ??????? Should be the path to the image file.the path to the image file.
For example: <image src=“sample.jpeg> For example: <image src=“sample.jpeg> if the image named “sample” is in the if the image named “sample” is in the same directory as your html file.same directory as your html file.
Images as LinksImages as Links You can also href an image the same way You can also href an image the same way
you would with text, by including the you would with text, by including the <image src=“sample.jpeg> in place of the <image src=“sample.jpeg> in place of the text between the href anchors.text between the href anchors.
For example: <a For example: <a href=“www.catabus.com”><image href=“www.catabus.com”><image src=“sample.jpeg></a>src=“sample.jpeg></a>
Or, you could have Or, you could have “mailto:[email protected]” in place of the “mailto:[email protected]” in place of the website.website.
TablesTables Refer to table of table attributesRefer to table of table attributes
FramesFrames A Frame document is very much like A Frame document is very much like
a normal HTML document, but the a normal HTML document, but the “Body” container is replaced by the “Body” container is replaced by the “Frameset” container.“Frameset” container.
Any tags that would normally be in Any tags that would normally be in the body cannot come before the the body cannot come before the Frameset tag, or it will be ignored.Frameset tag, or it will be ignored.
Frame attributesFrame attributes Rows:Rows:
-Simple numbers mean pixel size-Simple numbers mean pixel size-% means percentage value (ie: 33%)-% means percentage value (ie: 33%)
Columns:Columns:-Function just like rows-Function just like rows
Single FramesSingle Frames <frame> defines a single frame in a <frame> defines a single frame in a
frameset.frameset. This tag has 6 possible attributes:This tag has 6 possible attributes:
-SRC-SRC-Name-Name-Margin Width-Margin Width-Margin Height-Margin Height-Scrolling-Scrolling-No Resize-No Resize
SRCSRC This attribute takes the URL of the This attribute takes the URL of the
site you want to display in the frame site you want to display in the frame as its value.as its value.
A frame without an SRC value will be A frame without an SRC value will be displayed as a blank space.displayed as a blank space.
NameName This attribute lets you name your This attribute lets you name your
frame so that it can be targeted by frame so that it can be targeted by links in other documents.links in other documents.
If you choose to name your frames, If you choose to name your frames, they must begin with letters or they must begin with letters or numbers, no symbols.numbers, no symbols.
MarginwidthMarginwidth This attribute gives you control of the This attribute gives you control of the
width of your frames.width of your frames. The value is in pixels, so <frame The value is in pixels, so <frame
marginwidth=“170”> will be a frame marginwidth=“170”> will be a frame 170 pixels wide.170 pixels wide.
Leaving out the marginwidth will Leaving out the marginwidth will allow the browser to determine the allow the browser to determine the width of your frame.width of your frame.
MarginheightMarginheight Just like marginwidth, only vertically Just like marginwidth, only vertically
inclined.inclined.
ScrollingScrolling This allows you to determine if there This allows you to determine if there
should be a scrollbar in your frame.should be a scrollbar in your frame. Scrolling has 3 values: “yes,” “no,” and Scrolling has 3 values: “yes,” “no,” and
“auto.”“auto.”-Yes means there is always a bar, no -Yes means there is always a bar, no means there is never one, and auto means means there is never one, and auto means it will be automatically determined.it will be automatically determined.
You don’t have to include scrolling, the You don’t have to include scrolling, the default is auto.default is auto.
NoresizeNoresize This has no value (numerically, I This has no value (numerically, I
mean) – it just indicates to the mean) – it just indicates to the browser that the user has no control browser that the user has no control over the size of the frame.over the size of the frame.
This is also optional, and without it, This is also optional, and without it, the frame will be resizable.the frame will be resizable.
A note on these attributesA note on these attributes These attributes are included in the These attributes are included in the
<frame> and are separated by <frame> and are separated by commas.commas.
Example: Example: <frame src=“http://statecollege.com/bartour/”, <frame src=“http://statecollege.com/bartour/”, name=“College Life”, marginwidth=“170”, name=“College Life”, marginwidth=“170”, marginheight=“330”, scrolling=“auto”, noresize>marginheight=“330”, scrolling=“auto”, noresize>
