{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

recitation5 notes

recitation5 notes - 6.170Tutorial5-HTML CSS Prerequisites...

Info iconThis preview shows pages 1–4. Sign up to view the full content.

View Full Document Right Arrow Icon
6.170 Tutorial 5 - HTML & CSS Prerequisites Goals of this Tutorial Useful Resources for HTML & CSS Topic 1: HTML What is HTML? HTML Tags HTML Elements Web Browsers HTML Page Structure HTML Versions The <!DOCTYPE> Declaration Declarations Topic 2: CSS What do .css files actually do? CSS syntax Most common selectors Topic 3: Specificity and the “Cascade” in CSS: Topic 4: CSS Box Model Topic 5: Linking CSS to Rails Templates Prerequisites 1. Have Ruby installed on your computer Note: Having completed Tutorial P1, Ruby should already be installed on your computer. Goals of this Tutorial Become familiar with HTML & CSS Useful Resources for HTML & CSS 1. Mozilla Developer Network ( https://developer.mozilla.org/) a. HTML: https://developer.mozilla.org/en-US/docs/HTML b. CSS: https://developer.mozilla.org/en-US/docs/CSS 2. CSS Basic PDF: http://www.cssbasics.com/full.pdf 3. Layouts and Rendering in Rails: http://guides.rubyonrails.org/layouts_and_rendering.html
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Topic 1: HTML What is HTML? HTML is a language for describing web pages. HTML stands for H yper T ext M arkup L anguage HTML is a markup language •A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <strong> and </strong> O The first tag in a pair is the start tag, the second tag is the end tag O The end tag is written like the start tag, with a forward slash before the tag name O Start and end tags are also called opening tags and closing tags O There is often text inside the tags: <tagname> content </tagname> (i.e. <em> content </em> ) Certain HTML tags can also appear alone, like <img> HTML Elements "HTML tags" and "HTML elements" are often used to describe the same thing. But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: <p> This is a paragraph. </p> Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
Background image of page 2
HTML Page Structure Below is an example of HTML page structure: <html> <body> <h1>This a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> HTML Versions Since the early days of the web, there have been many versions of HTML: Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 / XHTML5 2012 The <!DOCTYPE> Declaration The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Image of page 4
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

Page1 / 19

recitation5 notes - 6.170Tutorial5-HTML CSS Prerequisites...

This preview shows document pages 1 - 4. Sign up to view the full document.

View Full Document Right Arrow Icon bookmark
Ask a homework question - tutors are online