Module 1
Overview of HTML and CSS
Module Overview
Overview of HTML
Overview of CSS
• Creating a Web Application by Using Visual
Studio 2017
Lesson 1: Overview of HTML
The Structure of an HTML Page
Tags, Elements, Attributes, and Content
Displaying Text in HTML
Displaying Images and Linking Documents in
HTML
Gathering User Input by Using Forms in HTML
Demonstration: Creating a Simple Contact
Form
• Attaching Scripts to an HTML Page
The Structure of an HTML Page
• All HTML pages have the same structure
• DOCTYPE declaration
• HTML section containing:
• Header
• Body
• Each version of HTML has its own DOCTYPE
• The browser uses the DOCTYPE declaration to
determine how to interpret the HTML markup
• For HTML5 pages, specify a DOCTYPE of html
Tags, Elements, Attributes, and Content
• HTML elements define the structure and
semantics of content on a web page
• Elements identify their content by
surrounding it with a start and an end tag
• 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>
• Use attributes to provide additional
information about the content of an
element
Displaying Text in HTML
Text in HTML can be marked up:
• As headings and paragraphs
<h1>An Introduction to HTML</h1>
<p>In this module, we look at the history of HTML and CSS.</p>
<h2>In the Beginning</h2>
<p>WorldWideWeb was created by Sir Tim Berners-Lee at CERN.
</p>
• With emphasis
To <strong>emphasize</strong> is to give extra weight to (a
communication); <em>"Her gesture emphasized her words"</em>
• In lists <ul>
<li>Notepad</li>
<li>Textmate</li>
<li>Visual Studio</li>
</ul>
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:
<img src="logo.jpg" alt="My Web site logo" height="100"
width="100" />
• Use the <a> tag to define a link
• The href attribute specifies the target of the link:
<a href="default.html" alt="Home Page">Home</a>
Gathering User Input by Using Forms in
HTML
The <form> element provides a mechanism
for obtaining user input
• The action attribute specifies where
the data will be sent
• The method attribute specifies how
the data will be sent
• Many different input types are
available
Demonstration: Creating a Simple Contact
Form
In this demonstration, you will see how to:
• Create an HTML Page
• Add Content to the Page
• Add a Form with Input Controls
• View the Page
Attaching Scripts to an HTML Page
• HTML is static, but pages can use
JavaScript to add dynamic behavior
• Use the <script> element to specify the
location of the JavaScript code:
<script type="text/javascript" src="alertme.js"></script>
• 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.
Lesson 2: Overview of CSS
Overview of CSS Syntax
How CSS Selectors Work
How HTML Inheritance and Cascading Styles
Affect Styling
• Adding Styles to An HTML Page
Overview of CSS Syntax
• All CSS rules have the same syntax:
selector {
property1:value;
property2:value;
..
propertyN:value;
}
• Comments are
/* Targets level 1 headings */
enclosed in /* … */ h1 {
font-size: 42px;
delimiters color: pink;
font-family: 'Segoe UI';
}
How CSS Selectors Work
• There are three basic 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
How HTML Inheritance and Cascading
Styles Affect Styling
• 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
Adding Styles to An HTML Page
• Use an element's style
<p style="color:blue;">
attribute to define styles some text </p>
specific to that element:
• Use the <style> element in
<style type="text/css">
the <head> to include p { color: blue; }
</style>
styles specific to a page:
• Use the <link> element to reference an
external style sheet:
<link rel="stylesheet" type="text/css" href="mystyles.css"
media="screen">
Lesson 3: Creating a Web Application by
Using Visual Studio 2017
Developing Web Applications by Using Visual
Studio 2017
Demonstration: Creating a Website by Using
Visual Studio 2017
Using the Microsoft Edge F12 Developer
Tools
• Demonstration: Exploring the Contoso
Conference Application
Developing Web Applications by Using
Visual Studio 2017
• Visual Studio 2017 provides tools for:
• Creating a web application project, and adding
folders to structure the content
• Debugging JavaScript code, examining and
modifying variables, and viewing the call stack
• Deploying a web application to a web server or
to the cloud
• Visual Studio 2017 features include:
• Full support for HTML5
• IntelliSense for JavaScript code
• Support for CSS3 properties and values
• CSS color picker
Demonstration: Creating a Website by
Using Visual Studio 2017
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
Using the Microsoft Edge 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 viewed
in any version
of Internet
Explorer from
v7.0 onwards
Demonstration: Exploring the Contoso
Conference Application
In this demonstration, you will learn how to
open the Contoso Conference application in
Visual Studio, and how to run the
application.
Lab: Exploring the Contoso Conference
Application
Exercise 1: Exploring the Contoso
Conference Application
• Exercise 2: Examining and Modifying the
Contoso Conference Application
Estimated Time: 30 minutes
Lab Scenario
ContosoConf is an annual technical
conference that describes the latest tools
and techniques for building HTML5 web
applications. The conference organizers
have created a web site to support the
conference, using the same technologies
that the conference showcases.
You are a developer that creates web sites
by using HTML, CSS, and JavaScript, and
you have been given access to the code for
the web site for the latest conference. You
decide to take a look at this web application
to see how it works, and how the developer
Module Review and Takeaways
• Review Questions
