HTML Extra Markup CS 1150 Fall 2016 Adding

  • Slides: 8
Download presentation
HTML Extra Markup CS 1150 Fall 2016

HTML Extra Markup CS 1150 Fall 2016

Adding Comments • If you want to add a comment to your code that

Adding Comments • If you want to add a comment to your code that will not be visible in the user’s browser, you can add the text between <!-- and --> • Example: <!-- comment goes here --> • What is written in the comments can be viewed if someone views the source code for the page

ID Attribute • • Every HTML element can carry the id attribute, which is

ID Attribute • • Every HTML element can carry the id attribute, which is used to uniquely identify that element from other elements on the page The value of id may only begin with an underscore or a letter (not a number or any other character) No two elements on the same page should have the same value for their id attribute, otherwise the value is no longer unique When we learn CSS, the value of id attributes will be important, as they can be styled based on their id value

Class Attribute • Every HTML element can carry a class attribute • Rather than

Class Attribute • Every HTML element can carry a class attribute • Rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page • Class attributes will only look different if there is a CSS rule that indicates it should be displayed differently

Block Elements • Some elements will always appear to start on a new line

Block Elements • Some elements will always appear to start on a new line in the browser window • These are known as block level elements • Examples of block level elements are <h 1>, <p>, <ul> and <li>

Inline Elements • Some elements will always appear to continue on the same line

Inline Elements • Some elements will always appear to continue on the same line as their neighboring elements • These are known as inline elements • Examples of inline elements are <a>, <b>, <em> and <img>

Grouping Text and Elements in a Box • The <div> element allows you to

Grouping Text and Elements in a Box • The <div> element allows you to group a set of elements together in one block level box • In a browser, the contents of the <div> element will start on a new line • Using an id or class attribute on the <div> element means you can create CSS rules to change the appearance of all the elements contained within it

Grouping Text and Elements Inline • The <span> element acts like an inline equivalent

Grouping Text and Elements Inline • The <span> element acts like an inline equivalent of the <div> element • It can contain a section of text where there is no other suitable element to differentiate it from its surrounding text • It can contain a number of inline elements • The most common reason why people use <span> elements is so they can control the appearance using CSS