Introduction to HTML

HTML Introduction HTML – Hypertext Markup Language are the instructions that tell a browser how to lay out the information (text, images, etc) in the browser window It is made up of tags – an opening tag and a closing tag with the content that the tag is applied to, in between them. You use the the tags to ‘mark up’ the text in between. –For example – to apply boldface to a section of text, the html will look like This text will be bold.

HTML Introduction Con’t Go to In Internet Explorer and Safari go to the menu bar at the top of the window –Click on ‘View’ –From the drop down menu select ‘view source’ VS The HTML Code on the left is interpreted by the browser and displays the content as the webpage on the right

Important HTML Tags - The start and closing tags of an html document - found at the beginning of an html document, will contain information such as the title, meta tags (content, keywords), css and javascript information. - the bulk of your webpage information is found between these two tags - For tables, you also need the row and column tags (you can also add a border=“#” in the opening table tag) – row – column (the column tags are contained within the row tags) For example will produce a table with one row, two columns - applies font type and size to text – - bold – - italicize - hyperlink - paragraph line break

Create a Simple HTML Document Open a text editor (Start>Programs>Accessories>Notepad) Start with your opening HTML tag Then the opening Head tag Add the opening and closing Title tag Close the Head tag Add the opening Body Tag Add the tags for a table with 2 rows, and 2 columns Add some bold text Add some italicized text Close the Body Tag Close the HTML Tag Save the document as an html file. (File > Save as > testpage.html > Save to your desktop) Double click on the file saved on your desktop, it should open in IE or Netscape

More Important HMTL tags - No closing tag! More on the tag –bgcolor="#FFFFFF" – Sets the background of the window to a solid color (in this case, #FFFFFF = white) –background="images/bgbar.gif" – sets an image to tile across the background to fill the entire window –text="#000000" link="#990000“ – sets the default color for the text, links, visited links, active links for the entire html document

Hexadecimal Color Codes link =“#000000” – The six numbers following the # sign denotes the hexadecimal code for a particular color (in this case, black). If you were to put this piece of code in the opening body tag of your html document, all your links (by default) would be black. You don’t need to memorize these numbers, but they are handy to know. # – black #FFFFFF – white #0000FF – blue (default link color) #FF0000 – red (default active link color) #80080 – purple (default visited link color)

HTML Editors Why do I need to know HTML when I have an html editor? –An HTML editor will work fine for what you want to do 99% of time, but there are little ‘quirks’ to the GUI interface that will cause your webpage to look slightly different than what you intended. But if you know some html you can look at the ‘code’ of the html document and make simple adjustments. So, why don’t you just write in HTML all the time? –Why don’t you walk to Poughkeepsie instead of drive? Because it takes too long! Except for the occasional code tweak, you will design a website infinity faster in an HTML editor and with less errors. –I can’t type more than a line or two before I will mistype or misspell something. If you do this in your ‘code’, the webpage will not work and/or will not look the way you intended. –Trouble shooting a large page of code is tedious and difficult.

I’ve got my images, my content, I know what NOT to do, and now I know some html to go with my html editor – For crying out loud, will you show me how to build my website now?!? I would, but that’s a topic for another presentation…