1 / 23

Intro to HTML Basics

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.

lottie
Download Presentation

Intro to HTML Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. Overview: Tags • As a text document, your HTML in Notepad will contain elements, such as headers, titles, paragraphs, etc. • These elements must be denoted in your script, which is done using tags • HTML tags consist of a left angle bracket (<), a name, and a right angle bracket (>) • For example: <title> • Tags must also close. To do so, you incorporate a slash (/). A starting and ending tag would be: <title> </title>

  3. More Tags • Any HTML document should contain certain tags:-<html>-<title>-<body>-headings (such as <H1>)-<paragraph>

  4. Adding Attributes to Tags • You can add attributes to tags to enhance your page. • Added attributes go inside the brackets of the opening tag (example: <p align=center> would center the paragraph) • A list of attributes can be found at http://archive.devx.com/projectcool/developer/reference/tag-table.html

  5. Colors • Background and text colors are attributes of the “body” of the document. • text=“#xxxxxx” determines your text color • Bgcolor=“#xxxxxx” determines your background color • Colors and codes for HTML can be found at http://hotwired.lycos.com/webmonkey/reference/color_codes/

  6. Lists • Lists are found inside the body, and are written as “<ul>” for an unordered list, or “<ol>” for an ordered (or numbered) list. • List items are denoted by “<li>” and do not require closing tags.

  7. Links • The biggest thing that made HTML so popular was its ability to link to other documents or sections of documents. • A link is indicated by <a> (anchor). • The text that will become the link is identified with by <href> (hyperlink reference).

  8. More Links • An example link would be: <a href=“document.html”>Link to document</a> • This would make the phrase “Link to document” a hyperlink to “document.html” assuming that it is in the same directory as your current file. • If the document is in a different directory, you need to include it in the path. For example: <a href=“extracrap/document.html”>

  9. More Links • If you wish to make an external link, you have to write out the full URL. I recommend opening the page you want in a browser, then copying and pasting the URL. This prevents you from unnecessary typing or messing up. • For example: <a href=“http://www.theonion.com/onion3902/index.html”> • Just make sure that when you paste it in, you add the quotes (“”).

  10. The href mailto: function • Another function of href can be to provide users with an opportunity to send you e-mail. • An example: <a href=“mailto:mpeters@ist.psu.edu”> • The full text, with something to link the function to would be: <a href=“mailto:mpeters@ist.psu.edu”>Send me an e-mail</a>

  11. Adding Images • I suggest you make a folder for images in your directory – it will make it easier to refer to things. • The <image src=“??????”> tag will allow you to insert an image. ??????? Should be the path to the image file. • For example: <image src=“sample.jpeg> if the image named “sample” is in the same directory as your html file.

  12. Images as Links • You can also href an image the same way you would with text, by including the <image src=“sample.jpeg> in place of the text between the href anchors. • For example: <a href=“www.catabus.com”><image src=“sample.jpeg></a> • Or, you could have “mailto:me@here.there” in place of the website.

  13. Tables • Refer to table of table attributes

  14. Frames • A Frame document is very much like a normal HTML document, but the “Body” container is replaced by the “Frameset” container. • Any tags that would normally be in the body cannot come before the Frameset tag, or it will be ignored.

  15. Frame attributes • Rows:-Simple numbers mean pixel size-% means percentage value (ie: 33%) • Columns:-Function just like rows

  16. Single Frames • <frame> defines a single frame in a frameset. • This tag has 6 possible attributes:-SRC-Name-Margin Width-Margin Height-Scrolling-No Resize

  17. SRC • This attribute takes the URL of the site you want to display in the frame as its value. • A frame without an SRC value will be displayed as a blank space.

  18. Name • This attribute lets you name your frame so that it can be targeted by links in other documents. • If you choose to name your frames, they must begin with letters or numbers, no symbols.

  19. Marginwidth • This attribute gives you control of the width of your frames. • The value is in pixels, so <frame marginwidth=“170”> will be a frame 170 pixels wide. • Leaving out the marginwidth will allow the browser to determine the width of your frame.

  20. Marginheight • Just like marginwidth, only vertically inclined.

  21. Scrolling • This allows you to determine if there should be a scrollbar in your frame. • Scrolling has 3 values: “yes,” “no,” and “auto.”-Yes means there is always a bar, no means there is never one, and auto means it will be automatically determined. • You don’t have to include scrolling, the default is auto.

  22. Noresize • This has no value (numerically, I mean) – it just indicates to the browser that the user has no control over the size of the frame. • This is also optional, and without it, the frame will be resizable.

  23. A note on these attributes • These attributes are included in the <frame> and are separated by commas. • Example: <frame src=“http://statecollege.com/bartour/”, name=“College Life”, marginwidth=“170”, marginheight=“330”, scrolling=“auto”, noresize>

More Related