{[ promptMessage ]}

Bookmark it

{[ promptMessage ]}

recitation5 notes

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

Info icon This 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 1
Image of page 1

Info icon This 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:
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.
Image of page 3

Info icon This 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 ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern