1 / 21

Module 1

Module 1. Overview of HTML and CSS . Module Overview. Overview of HTML Overview of CSS Creating a Web Application by Using Visual Studio 2012. Lesson 1 Overview of HTML. Separation of Concerns (SoC). HTML -> What is shown (content) CSS -> How it is shown (presentation)

sondra
Download Presentation

Module 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Module 1 Overview of HTML and CSS

  2. Module Overview • Overview of HTML • Overview of CSS • Creating a Web Application by Using Visual Studio 2012

  3. Lesson 1 Overview of HTML

  4. Separation of Concerns (SoC) • HTML -> What is shown (content) • CSS -> How it is shown (presentation) • JavaScript -> How it works (behavior)

  5. The Structure of an HTML Page • DOCTYPE declaration • The browser uses the DOCTYPE declaration to determine how to interpret the HTML markup • For HTML5 pages, specify a DOCTYPE of html • Quirks mode • <html lang=“en”> • <head> • <meta charset=“utf-8”/> • <title>This is a Title</title> • <body>

  6. Tags, Elements, Attributes, and Content • Elements • Tags • Attributes (including Global Attributes) • Content • World Wide Web Consortium – w3schools.com • Elements can be nested: <p> <strong>Elements</strong> consist of <strong>content</strong> bookended by a <em>start</em> tag and an <em>end</em> tag. </p>

  7. Displaying Text in HTML • Headings and Paragraphs • Lists <h1>An Introduction to HTML</h1> <h2>In the Beginning</h2> <p> <strong>In this module, </strong> <em> we look at the history </em>of HTML and CSS. </p> <ul> <li>Notepad</li> <li>Textmate</li> <li>Visual Studio</li> </ul> <ol> <li>Notepad</li> <li>Textmate</li> <li>Visual Studio</li> </ol> <dl> <dt>Notepad</li> <dd>Textmate</li> <dd>Visual Studio</dd> </dl>

  8. Displaying Images and Linking Documents in HTML • Use the <img> tag to display an image • The src attribute specifies the URL of the image source: • Use the <a> tag to define a link • The href attribute specifies the target of the link: <img src="logo.jpg" alt="My Web site logo" /> <a href="default.html" alt="Home Page">Home</a>

  9. Gathering User Input by Using Forms in HTML • The <form> element provides a mechanism for obtaining user input • Action attribute (script.aspx) • Method attribute (“GET” or “POST”) • Many different input types are available

  10. Attaching Scripts to an HTML Page • HTML is static • JavaScript adds dynamic behavior • <script> element • The order of <script> elements is important • Make sure objects and functions are in scope before they are used • Use the <noscript> element to alert users with browsers that have scripting disabled. <script type="text/javascript" src="alertme.js"></script>

  11. Lesson 2 Overview of CSS

  12. Overview of CSS Syntax • All CSS rules have the same syntax: • Comments are enclosed in /* … */ delimiters selector { property1:value; property2:value; .. propertyN:value; } /* Targets level 1 headings */ h1 { font-size: 42px; color: pink; font-family: 'Segoe UI'; }

  13. How CSS Selectors Work • 3 CSS selectors • The element selector: h2{} • The class selector: .myClass {} • The id selector: #thisId {} • CSS selectors can be combined to create more specific rules • The wildcard * selector returns the set of all elements • Use […] to refine selectors based on attribute values (e.g. [type=“text”])

  14. Inheritance and Cascading Styles • HTML inheritance and the CSS cascade mechanism govern how browsers apply style rules • HTML inheritance determines which style properties an element inherits from its parent • The cascade mechanism determines how style properties are applied when conflicting rules apply to the same element

  15. Adding Styles to An HTML Page • Element specific style • <style> element • External style sheet reference through <link> tag <p style="color:blue;">some text </p> <style type="text/css"> p { color: blue; } </style> <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen">

  16. Lesson 3 Introduction to Visual Studio 2012 F12 Developer Tools

  17. Developing Web Applications by Using Visual Studio 2012 • Visual Studio 2012 features include: • Full support for HTML5 • IntelliSense for JavaScript code • Support for CSS3 properties and values • CSS color picker

  18. Demonstration In this demonstration, you will see how to: • Create a Web Site Project • Add and Edit files in the Project • Run the Web Application • Modify the Live Application

  19. Using the Internet Explorer F12 Developer Tools The F12 Developer Tools enables developers to: Inspect and validate HTML and CSS Run and debug JavaScript code Profile page load times View a page as if it were being viewedin any versionof Internet Explorer from v7.0 onwards

  20. Lab Open and run the Contoso Conference Application

  21. Homework You will receive an email

More Related