Intro to HTML Basics u HTML Hypertext Markup
Intro to HTML Basics u HTML = Hypertext Mark-up Language u HTML is a plain-text file that can be created using a text editor like Notepad. u When creating HTML files for the web, make sure you save them as. html – or they won’t work.
Overview: Tags As a text document, your HTML in Notepad will contain elements, such as headers, titles, paragraphs, etc. u These elements must be denoted in your script, which is done using tags u HTML tags consist of a left angle bracket (<), a name, and a right angle bracket (>) u For example: <title> u Tags must also close. To do so, you incorporate a slash (/). A starting and ending tag would be: <title> </title> u
More Tags u Any HTML document should contain certain tags: -<html> -<title> -<body> -headings (such as <H 1>) -<paragraph>
Adding Attributes to Tags u You can add attributes to tags to enhance your page. u Added attributes go inside the brackets of the opening tag (example: <p align=center> would center the paragraph) u A list of attributes can be found at http: //archive. devx. com/projectcool/ developer/reference/tag-table. html
Colors Background and text colors are attributes of the “body” of the document. u text=“#xxxxxx” determines your text color u Bgcolor=“#xxxxxx” determines your background color u Colors and codes for HTML can be found at http: //hotwired. lycos. com/webmonkey/ref erence/color_codes/ u
Lists u Lists are found inside the body, and are written as “<ul>” for an unordered list, or “<ol>” for an ordered (or numbered) list. u List items are denoted by “<li>” and do not require closing tags.
Links u The biggest thing that made HTML so popular was its ability to link to other documents or sections of documents. u A link is indicated by <a> (anchor). u The text that will become the link is identified with by <href> (hyperlink reference).
More Links An example link would be: <a href=“document. html”>Link to document</a> u 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. u If the document is in a different directory, you need to include it in the path. For example: <a href=“extracrap/document. html”> u
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. u For example: <a href=“http: //www. theonion. com/onion 390 2/index. html”> u Just make sure that when you paste it in, you add the quotes (“”). u
The href mailto: function u Another function of href can be to provide users with an opportunity to send you e-mail. u An example: <a href=“mailto: mpeters@ist. psu. edu”> u 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>
Adding Images I suggest you make a folder for images in your directory – it will make it easier to refer to things. u The <image src=“? ? ? ”> tag will allow you to insert an image. ? ? ? ? Should be the path to the image file. u For example: <image src=“sample. jpeg> if the image named “sample” is in the same directory as your html file. u
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. u For example: <a href=“www. catabus. com”><image src=“sample. jpeg></a> u Or, you could have “mailto: me@here. there” in place of the website. u
- Slides: 12