Basic HTML PowerPoint How Hyper Text Markup Language Works

Saving Properly When creating a web site, you always need to create a new folder for each site. Go to your G:drive and create a new folder Name it assignment 1 Each different assignments you must make a new folder and always save your.html files and images in that folder.

Basics of HTML 2 ways to view a webpage – Web view is how the browser interrupts your code (how you normally view web pages). The purpose of a web browser (like Internet Explorer, Firefox, Chrome, etc) is to read HTML documents and display them as web pages. – Source code view is the written text that is created by the web designer. The source code for any webpage can be viewed. HTML tags are written between angle brackets ( ) and most tags will usually come in pairs like and

Basics of HTML cont. The first tag in a pair is called the opening tag ( ) and the second is called the closing tag ( **note the “/”) The browser does not display the HTML tags, but uses the tags to interpret the content of the page. Tags order matters! If you open the tags one way then it must reverse when closed. Example: Hello World Tags are not case sensitive

Basics of HTML cont. All HTML documents start with and end with Every HTML webpage has 2 sections which are denoted by HTML tags – The Head section will always open & close before the Body section opens

Basics of HTML – Head Section Head section – This section always begins with and ends with – This section will not be visible in the body of the web browser – The name of the webpage that appears in the title bar is placed in this section Example: My First Page Others elements can be placed in this section but we will go over those in a later lesson

Basics of HTML – Body Section Body Section – Information displayed in this section will be displayed in the body of the web browser – The closing body tag will always proceed the closing HTML tag.

Basics of HTML – Saving How to save as HTML – File -> Save As -> (the name you want the file to be).html – When you save as.html this tells the computer that this file should be opened by a browser – If using a simple text editor, typing.html manually is required – Example: MyFirstPage.html MyFirstPage.doc - Will open as a webpage - Will not open as a webpage

Basics of HTML – REVIEW Webpage title My first webpage Starts every HTML page Info in this section will not appear in the body of the web browser Info in this section will appear in the body of the web browser Ends every HTML page

Meta Tags HTML meta tags are officially page data tags that lie between the open and closing tags in the HTML code of a document.

Meta Tags Here's a code example of meta tags: Not a Meta Tag, but required anyway

Description Meta Tag This is what the description tag looks like: The “description” meta tag helps websites in three important ways: – Tells the search engine what your page or site is about – Helps you click through rates to your site – Helps with ranking your site

Review of HTML Titles the browser

Best Practices in HTML PowerPoint HTML Best Practices

Best Practices in HTML Best practice refers to a set of unofficial guidelines that developers follow in order to make sure that they do the best quality work. This is not only to make their lives easier but also to help others understand what you have done and, when you run into trouble, help you quickly.

Best Practices in HTML – Close all tags that should be closed Occasionally you can get by without closing certain tags without any repercussions but it is a good habit to always close the tags that should be closed – Write tags in all lowercase Case does not matter in HTML, but when you learn XHTML (which is lowercase sensitive) you will have an easier time transitioning – Keep pictures proportional HTML tags can resize pictures but avoid stretching pictures

Best Practices in HTML – Closing tags should be a mirror image of opening tags Occasionally tag order can be wrong but still work; proper order must be followed. If you bold, italicize, & then underline text make sure the closing tags are underline, italics, & then bold – Example Works but NOT correct: Some Text Works and is correct: Some Text

Styling in HTML PowerPoint How to style in HTML

Styling in HTML Styling tags can be added to HTML to place emphasis or add appeal – These tags must be closed … bold … italics … underline … starts and ends paragraphs; creates 1 blank line – These tags do not have to be closed … line break … horizontal rule; creates a straight line across the page

Styling in HTML cont. – Heading tags must be closed … Largest heading tag … 2 nd largest heading tag … 3 rd largest heading tag … 4 th largest heading tag … 2 nd smallest heading tag … smallest heading tag

Styling in HTML – REVIEW Code View: My name is… The Great Gatsby See Spot Run Earth Mars Yellow Bird About us What to do now? Browser View My name is… The Great Gatsby See Spot Run Earth Mars Yellow Bird About us What to do now?

Lists in HTML PowerPoint How to create lists in HTML

Creating Lists in HTML 3 types of lists – Unordered list Bulleted items – Ordered list Numbered items – Definition List a list of items, with a description of each item

Unordered Lists in HTML The tag for a bulleted list is & Each item is surrounded with the open and close tag (li = list item) Bullets can be changed to squares or circles with the optional code type=“square” or type=”circle” in the tag. – Code View Milk Eggs -- Browser View Milk Eggs

Ordered Lists in HTML The tag for a numbered list is & Each item is surrounded with the open and close tag (li = list item) List items will be numbered Numbers can be changed to a, A, i, or I with the optional code type=“a”, type=“A”, etc in the tag. – Code View George Washington John Adams -- Browser View 1. George Washington 2. Johns Adam

Definition Lists in HTML The tag for this list is & Each term is surrounded with the tag and each description is surrounded with the tag – Code View Electron - carries a negative electric charge Neutron - carries no electric charge -- Browser View Electron - carries a negative electric charge Neutron - carries no electric charge

Lists in HTML – REVIEW Ordered lists produce numbered lists Unordered lists produce bulleted lists Each item in an ordered list & unordered list is surrounded with the tag Definition lists produce terms with definitions Each term in a definition list is surrounded with the tag and each description is surrounded with the tag.

Assignment HTML Assignment #1