HTML: Hyptertext Markup Language Doman’s Sections

Websites are simple Made of only two parts – Code – Graphics

Code Code is the aspect of the website that only the developer sees Web browsers read the code and display what it says (like instructions) to the screen

What is HTML HTML describes the format of the information to be displayed… browser can then format the information when it receives the file. Marking up text to display to tell computer how to format and present the information, images. Enabling links to positions on the same page or to new pages.

FYI: XHTML: eXtendsible HTML First big change to HTML Adds structure and extensibility of XML to HTML. Requires more strict adherence to syntax rules Requires DOCTYPE tag at start of the page NOT part of this class

HTML : Hypertext Markup Language Made up of: Tags Attributes Content Everything is wrapped in a tag Paragraph Tags tell the browser how to display content

HTML - Tags Opening TagAttribute (optional) Content Closing Tag Paragraph

HTML TAGS Tags identify the HTML control information. Bracketed by Format: – Start tag ‘work’: – End tagged content: – Start and End together tagged content:

Format for the remainder of lecture The slides will give an outline and overview of the tags you will need to learn W3schools.org link will be used to demonstrate and practice the tags W3schools.org Local html file will also be used to demonstrate the tags.

Creating and Viewing HTML 1.Create a file and add HTML tags and information text Use Notebook or WordPad or better yet: Notepad++ 2.Save the file (directions to follow)

Required HTML tags Tag to indicate that the following text is written with html tags …..

DOCTYPE declaration Not an HTML tag It is an instruction to the browser about what version of HTML is used

HTML Sections Header section Body Section

HTML - Pages All html pages need only: html tag (opening and closing) head tag (opening and closing) body tag (opening and closing)

Header Section Identifying data Used to indicate any information about the screen itself Not always displayed on the screen Common header tags:

Header Section : title Tag Used to add a title to your browser’s Title bar. myTitle

Header Section : meta Tag Used to describe any other relevant information about the page Uses attributes inside the tag Three attributes that may help get your page found by search engine: – keyword – description – author

EXAMPLE: my Title

Header Section : style Tag Tag to identify cascading style sheet (CSS) rules These determine how style rules apply to HTML tags body {backgound: blue; color: red; } This is to be covered in more depth next week

Header Section : script Tag Tag that allows the use of Java (via JavaScript) and Visual Basic (via VBScript) programming in the HTML page. …. Not covered in this course See Lesson 14 of Sams Teach Yourself HTML text.

Creating and Viewing HTML 1.Create a file and add HTML tags and information text Use Notebook or WordPad or Notepad++ 2.Save the file Use file extension: htm or html 3.Open the file Demonstration Link to help for MACs

Body Section … Surrounds any text to appear on the page All the formatting tags can be placed here. The rest of the HTML lectures concern the body section

Paragraphs texttexttexttexttext Browser adds a blank line before the text Text is wrapped at the end of the window

Forced break line This tag forces a break or blank line in the formatted text.

Text Emphasis Italics words to be italicized Bolden words with bold format Underlining words underlined

Text Emphasis Size big words smaller words Subscript and superscript subscript characters superscript characters

Headings HTML provides 6 different heading tags End of heading includes a blank line after text … …. …

Special Characters Not all browsers correctly display symbols HTML uses a code (entity character reference) to tell the browser how to interpret symbols Ex: < &lt ; ± &plusmin; Most frequently used characters listed in Appendix C in Sam’s teach yourself HTML text

Special Characters one to remember stands for nonbreaking space HTML ignores extra spaces To include extra spaces in your text use &nbsp

Lists Types of lists – Bulleted (unordered) lists – Numbered/lettered lists – Definition lists

Lists: Bulleted (Unordered) List tag containers:.. List elements.. Example: first element in list second element in list

List (ul) created: first element in list second element in list

Lists: Ordered List List tag containers:.. List elements.. Example: first element in list second element in list

List (ol) created: first element in list 2. second element in list

Lists: Definition List Formats list like a set of terms and their definitions Definition list tag … Term tags … Definition data tag..

Lists: Definition List Example : First term Definition of term Second term Definition of second term

List (dl) created: FiFirst term Definition of term Second Term Definition of second term

Tables 4 elements of the table: 1.Table itself 2.Row 3.Table headings 4.Column. …  HTML is row oriented  That is, rows surround the columns and table headings

Tables: Creating tables Column 1 Column 2 Column 3 Data 1 Data 2 Data 3 First create the row Then create the headers Create the second row Create the column data

TABLE created: Column 1Column 2 Column 3 Data 1Data 2Data 3

Linking Text and Documents Before the browser on the displaying machine can link to another page, location, image,… anything… the machine must know the address of the object. Addresses are known by their URL

HTML Anchor Tag hyperlink text or object Enabling links to positions on the same page or to new pages.

Linking to another page To link to our class page: Class web page href: “hyperlink reference”

Bookmarking positions in one HTML document You can reference and link to a point in a specific spot in an HTML document. Bookmarks are not seen by the user. Use the name attribute of the tag to bookmark your document. Start of bookmark

Anchor example …. Start of bookmark …. To return to the bookmark click here ….

Images  Add images to webpage by using a single HTML tag, the image source tag  Key is getting the location correct

Finding your images Save your images in the same folder as your html file.

Image Attributes - alt  Alternate attribute – This provides text for browsers that don’t have graphic capabilities.  It also provides the text shown when the input pointer hovers over the image.

Image Attributes - size  Secure the size of the image displayed – height and width attributes  These can be specified in units of  Percentage of the page real estate  Actual pixels

Floating Objects can be made to float left or right The object will ‘float’ along side the existing text or content Floating is done through the style attribute In any tag identifier, add the attribute style=“float:right”

Floating examples To float an image: To float a table: