Introduction to HTML & CSS PDF

CHAPTER 1 : HTML INTRODUCTION What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes dif...

CHAPTER 1 : HTML INTRODUCTION What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content HTML EXAMPLE A small HTML document: Page Title My First Heading My first paragraph. EXAMPLE EXPLAINED The DOCTYPE declaration defines the document type to be HTML The text between and describes an HTML document The text between and provides information about the document The text between and provides a title for the document The text between and describes the visible page content The text between and describes a heading The text between and describes paragraph Using this description, a web browser can display a document with a heading and a paragraph. HTML TAGS HTML tags are keywords (tag names) surrounded by angle brackets: content HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a slash before the tag name. The start tag is often called the opening tag. The end tag is often called the closing tag. The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document: HTML Page Structure Below is a visualization of an HTML page structure: Only the area (the white area) is displayed by the browser. VERSIONS OF HTML Since the early days of the web, there have been many versions of HTML: HTML EDITORS Write HTML Using Notepad or TextEdit HTML can be edited by using a professional HTML editor like: Adobe Dreamweaver Microsoft Expression Web CoffeeCup HTML Editor However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the 4 steps below to create your first web page with Notepad. STEP 1: OPEN NOTEPAD To open Notepad in Windows 7 or earlier: Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad. To open Notepad in Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. STEP 2: WRITE SOME HTML Write or copy some HTML into Notepad. Example My First Heading My first paragraph. STEP 3: SAVE THE HTML PAGE Save the file on your computer. Select File > Save as in the Notepad menu. You can use either.htm or.html as file extension. There is no difference, it is up to you. STEP 4: VIEW HTML PAGE IN YOUR BROWSER Double-click your saved HTML file, and the result will look much like this: HTML BASIC EXAMPLES HTML Documents All HTML documents must start with a type declaration:. The HTML document itself begins with and ends with. The visible part of the HTML document is between and. HTML Headings HTML headings are defined with the to tags: This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 HTML Paragraphs HTML paragraphs are defined with the tag: This is a paragraph. This is a paragraph. This is a paragraph. Don't Forget the End Tag Some HTML elements will display correctly, even if you forget the end tag: HTML ELEMENTS HTML documents are made up by HTML elements. HTML elements are written with a start tag, with an end tag, with the content in between: content The HTML element is everything from the start tag to the end tag: My first HTML paragraph. Some HTML elements do not have an end tag. EMPTY HTML ELEMENTS HTML elements with no content are called empty elements. is an empty element without a closing tag (the tag defines a line break). The tag creates a horizontal line in an HTML page. The hr element can be used to separate content: HTML Line Breaks The HTML element defines a line break. Use if you want a line break (a new line) without starting a new paragraph: This isa paragraph with line breaks Example The hr tag defines a horizontal rule: This is a paragraph. This is a paragraph. This is a paragraph. RESULT THE HTML ELEMENT The HTML element defines a block of pre-formatted text, with structured spaces and lines. To display anything, with right spacing and line-breaks, you must wrap the text in a element: EXAMPLE The pre tag is needed for displaying poems: My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. HTML tags are not case sensitive: means the same as. THE END OF CHAPTER 1  CHAPTER 2: HTML STYLES Every HTML element has a default style (background color is white, text color is black, text-size is 12px...) Changing the default style of an HTML element, can be done with the style attribute. This example changes the default background color from white to red: EXAMPLE This is a heading This is a paragraph. The HTML Style Attribute The HTML style attribute has the following syntax: style="property:value" The property is a CSS property. The value is a CSS value. You will learn more about CSS later in this tutorial. HTML Text Color The color property defines the text color to be used for an HTML element: This is a heading This is a paragraph. HTML Text Fonts The font-family property defines the font to be used for an HTML element: This is a heading This is a paragraph. HTML Text Size The font-size property defines the text size to be used for an HTML element: This is a heading This is a paragraph. HTML Text Alignment The text-align property defines the horizontal text alignment for an HTML element: Centered heading This is a paragraph. HTML Text Formatting Elements HTML uses elements like and for formatting output, like bold or italic text. Formatting elements were designed to display special types of text: Bold text Important text Italic text Emphasized text Marked text Small text Deleted text Inserted text Subscripts Superscripts HTML Bold and Strong Formatting The HTML element defines bold text, without any extra importance. This text is normal. This text is bold. The HTML element defines strong text, with added semantic "strong" importance. This text is normal. This text is strong. HTML Italic and Emphasized Formatting The HTML element defines italic text, without any extra importance. This text is normal. This text is italic. The HTML element defines emphasized text, with added semantic importance. This text is normal. This text is emphasized. NOTE Browsers display as , and as. However, there is a difference in the meaning of these tags: and defines bold and italic text, but and means that the text is "important". HTML Small Formatting The HTML element defines small text: HTML Small Formatting HTML Marked Formatting The HTML element defines marked or highlighted text: HTML Marked Formatting HTML Deleted Formatting The HTML element defines deleted (removed) of text. The del element represent deleted (removed) text. My favorite color is blue red. HTML Inserted Formatting The HTML tag element defines inserted (added) text. The ins element represent inserted (added) text. My favorite color is red. HTML Subscript Formatting The HTML element defines subscripted text. This is subscripted text. HTML Superscript Formatting The HTML element defines superscripted text. This is superscripted text. HTML Comments You can add comments to your HTML source by using the following syntax: Comment tags are used to insert comments in HTML. Comments are not displayed by the browser, but they can help document your HTML. With comments you can place notifications and reminders in your HTML: This is a paragraph. THE END OF CHAPTER 2  CHAPTER 3: HTML STYLES – CSS Styling HTML with CSS CSS stands for Cascading Style Sheets Styling can be added to HTML elements in 3 ways: Inline - using a style attribute in HTML elements Internal - using a element in the HTML section External - using one or more external CSS files The most common way to add styling, is to keep CSS syntax in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself. CSS Syntax CSS styling has the following syntax: element { property:value ; property:value } the element is an HTML element name. The property is a CSS property. The value is a CSS value. Multiple styles are separated with semicolon. Inline Styling (Inline CSS) Inline styling is useful for applying a unique style to a single HTML element: Inline styling uses the style attribute. This inline styling changes the text color of a single heading: EXAMPLE This is a Blue Heading Internal Styling (Internal CSS) An internal style sheet can be used to define a common style for all HTML elements on a page. Internal styling is defined in the section of an HTML page, using a element: EXAMPLE body {background-color:red} h1 {color:blue} p {color:green} This is a heading This is a paragraph. CSS Fonts The CSS property color defines the text color to be used for an HTML element. The CSS property font-family defines the font to be used for an HTML element. The CSS property font-size defines the text size to be used for an HTML element. EXAMPLE h1 { color:blue; font-family:verdana; font-size:300%; } p { color:red; font-family:courier; font-size:160%; } This is a heading This is a paragraph. The CSS Box Model Every visible HTML element has a box around it, even if you cannot see it. The CSS border property defines a visible border around an HTML element: p { border:1px solid grey; } This is a heading This is a paragraph. This is a paragraph. This is a paragraph. The id Attribute All the examples above use CSS to style HTML elements in a general way. The CSS styles define an equal style for all equal elements. To define a special style for a special element, first add an id attribute to the element: Example I am different p#p01 { color: blue; } This is a paragraph. This is a paragraph. This is a paragraph. I am different. The class Attribute To define a style for a special type (class) of elements, add a class attribute to the element: Example I am different Now you can define a different style for this type (class) of element:  p.error { color:red; } This is a paragraph. This is a paragraph. I am different. This is a paragraph. I am different too. NOTE Use id to address single elements. Use class to address groups of elements. External Styling (External CSS) External style sheet are ideal when the style is applied to many pages. With external style sheets, you can change the look of an entire site by changing one file. External styles are defined in the section of an HTML page, in the element: EXAMPLE This is a heading This is a paragraph. THE END OF CHAPTER 3  CHAPTER 4: HTML LINKS ,IMAGE AND MARQUEE Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links - Hyperlinks HTML links are hyperlinks. A hyperlink is an element, a text, or an image that you can click on, and jump to another document. HTML Links - Syntax In HTML, links are defined with the tag: link text Visit our HTML tutorial The href attribute specifies the destination address (http://www.calankacom/html/) The link text is the visible part (Visit our HTML tutorial). Clicking on the link text, will send you to the specified address. Note The link text does not have to be text. It can be an HTML image or any other HTML element. LOCAL LINKS The example above used an absolute URL (A full web address). A local link (link to the same web site) is specified with a relative URL (without http://www....).  HTML Images is a link to a page on this website. HTML Links - Colors and Icons When you move the mouse cursor over a link, two things will normally happen: The mouse arrow will turn into a little hand The color of the link element will change By default, links will appear as this in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red You can change the defaults, using styles:  a:link { color:red; background-color:black; text-decoration:none; } a:visited { color:green; background-color:transparent; text-decoration:none; } a:hover { color:blue; background-color:transparent; text-decoration:underline; } a:active { color:yellow; background-color:transparent; text-decoration:underline; } You can change the default colors of links HTML Images HTML Links - The target Attribute The target attribute specifies where to open the linked document. This example will open the linked document in a new browser window or in a new tab: Visit our HTML tutorial! If you set the target attribute to "_blank", the link will open in a new browser window or tab. If your webpage is locked in a frame, you can use target="_top" to break out of the frame: Locked in a frame? Click here! HTML Images HTML Images Syntax In HTML, images are defined with the tag. The tag is empty, it contains attributes only, and does not have a closing tag. The src attribute defines the url (web address) of the image: The alt Attribute The title attribute specifies an alternate text for the image, if it cannot be displayed. The value of the alt attribute should describe the image in words: Example The title attribute is required. A web page will not validate correctly without it. Image Size - Width and Height You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use px after the value): Example Spectacular Mountains HTML Links - Image as Link It is common to use images as links: The image is a link. You can click on it. We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image. BASIC Marquee Change text between marquee tags Marquee BEHAVIOR Slide marquee behavior Alternate marquee behavior Marquee DIRECTION Right marquee direction Up marquee direction Down marquee direction Marquee LOOP Number of times marquee wiil scroll (loop) This marquee is set to scroll (to loop) 3 times Another example: This marquee will loop 5 times Marquee color and width GOLLIS UNIVERSITY THE END OF CHAPTER 4  CHAPTER 5: HTML TABLES AND LISTS Defining HTML Tables Jill Smith 50 Eve Jackson 94 John Doe 80 Example explained: Tables are defined with the tag.Tables are divided into table rows with the tag. Table rows are divided into table data with the tag.A table row can also be divided into table headings with the NOTE Table data are the data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables, etc. An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: Ahmed Yahye 50 Hana Jama 94 Ali Abdi 80 the border attribute is on its way out of the HTML standard! It is better to use CSS. An HTML Table with Collapsed Borders If you want the borders to collapse into one border, add CSS border-collapse: Example table, th, td { border: 1px solid black; border-collapse: collapse; } Ahmed Yahye 50 Hana Jam 94 Ali Abdi 80 An HTML Table with Cell Padding Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } Ahmed Yahye 50 Hana Jama 94 Ali Abdi 80 Try to change the padding to 5px. HTML Table Headings Table headings are defined with the tag. By default, all major browsers display table headings as bold and centered: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } FirstnameLastnamePoints AhmedYhye50 AliAbdi 80 An HTML Table With a Caption To add a caption to a table, use the tag: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } Monthly savings MonthSavings January$100 February$50 HTML Lists Unordered HTML Lists An unordered list starts with the tag. Each list item starts with the tag. The list items will be marked with bullets (small black circles). Unordered List with Default Bullets Apples Bananas Lemons Oranges Unordered HTML Lists - The Style Attribute A style attribute can be added to an unordered list, to define the style of the marker: Disc: Unordered List with Disc Bullets Apples Bananas Lemons Oranges Circle: Unordered List with Circle Bullets Apples Bananas Lemons Oranges Square: Unordered List with Square Bullets Apples Bananas Lemons Oranges None: Unordered List without Bullets Apples Bananas Lemons Oranges Ordered HTML Lists An ordered list starts with the tag. Each list item starts with the tag. The list items will be marked with numbers. Ordered List Apples Bananas Lemons Oranges Ordered HTML Lists - The Type Attribute A type attribute can be added to an ordered list, to define the type of the marker: Numbers: Ordered List with Numbers Apples Bananas Lemons Oranges Upper Case: Ordered List with Letters Apples Bananas Lemons Oranges Lower Case: Ordered List with Lowercase Letters Apples Bananas Lemons Oranges Roman Upper Case: Ordered List with Roman Numbers Apples Bananas Lemons Oranges Roman Lower Case: Ordered List with Lowercase Roman Letters Apples Bananas Lemons Oranges HTML Description Lists A description list, is a list of terms, with a description of each term. The tag defines a description list. The tag defines the term (name), and the tag defines the data (description). Description List: A description list, is a list of terms, with a description of each term. The tag defines a description list. The tag defines the term (name), and the tag defines the data (description). A Description List Coffee - black hot drink Milk - white cold drink Nested HTML Lists List can be nested (lists inside lists). Coffee Tea Black tea Green tea Milk List items can contain new list, and other HTML elements, like images and links, etc. THE END OF CHAPTER 5  CHAPTER 6: HTML IFRAMES,COLOR AND FORM An iframe is used to display a web page within a web page. Iframe Syntax The syntax for adding an iframe is: The src attribute specifies the URL (web address) of the iframe page. Iframe - Set Height and Width Use the height and width attributes to specify the size. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). EXAMPLE Iframe - Remove the Border The frameborder attribute specifies whether or not to display a border around the iframe. Set the attribute value to "0" to remove the border: EXAMPLE HTML iframe Tag HTML Color Names Colors are displayed combining RED, GREEN, and BLUE. 140 Color Names are Supported by All Browsers 140 color names are defined in the HTML5 and CSS3 color specifications. 17 colors are from the HTML specification, 123 colors are from the CSS specification. The table below lists them all, along with their hexadecimal values. The 17 colors from the HTML specification are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Sorted by Color Name Click on a color name (or a hex value) to view the color as the background-color along with different text colors: HTML Forms The Element HTML forms are used to collect user input. The element defines an HTML form: form elements HTML forms contain form elements. Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more. The Element The element is the most important form element. The element has many variations, depending on the type attribute. Text Input defines a one-line input field for text input: First name: Last name: Note that the form itself is not visible. Also note that the default width of a text field is 20 characters. Radio Button Input input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices: Male Female The Submit Button defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute: EXAMPLE First name: Last name: If you click "Submit", the form-data will be sent to a page called "action_page.php". The Action Attribute The action attribute defines the action to be performed when the form is submitted. The common way to submit a form to a server, is by using a submit button. Normally, the form is submitted to a web page on a web server. In the example above, a server-side script is specified to handle the submitted form: If the action attribute is omitted, the action is set to the current page. The Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms: or: When to Use GET? You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address: action_page.php?firstname=Mickey&lastname=Mouse GET is best suited to short amounts of data. Size limitations are set in your browser. When to Use POST? You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address. The Name Attribute To be submitted correctly, each input field must have a name attribute. This example will only submit the "Last name" input field: