Microsoft 4 Mobile First Web Mark Up_MDIS_17 18x HTML Guide

User Manual:

Open the PDF directly: View PDF .
Page Count: 12

Download
Open PDF In Browser	View PDF

CIS1019-N Web and Mobile Development

19/06/2017

Aims






Consider how we move from wireframe to code
Review HTML5 structural tags
Write some Mobile-first HTML5
Review CSS selectors and rules
Create a Mobile-first web page of a wireframe

Intended Learning Outcomes
By the end of the session you should be able to:





Ana Brierson

Name the main HTML5 structural tags
Use HTML5 structural tags for page development
Describe CSS3 selectors
Use CSS3 to create a simple liquid web page

1

CIS1019-N Web and Mobile Development

19/06/2017

Methodology
User-centred
Documentation

Wireframe

HTML5
CSS3

Wireframe Progression

M

Ana Brierson

2

CIS1019-N Web and Mobile Development

19/06/2017

Mobile Fidelity Progression

HTML5 Structural Tags
 

Contains a thematic grouping of content.

 
 a group of introductory or navigational aids. A header element

Ana Brierson











typically contains the section’s heading (an 
–
), but can
also contain other content, such as a table of contents, a search form,
or any relevant logos.
Contains major navigation links.

The footer element represents a footer for its nearest ancestor
sectioning content or sectioning root element. A footer typically
contains information about its section such as who wrote it, links to
related documents, copyright data etc.
Represents independent content that could be re-used, eg RSS.
Represents content ‘loosely’ related to the main content.

3

CIS1019-N Web and Mobile Development

19/06/2017

Mobile-first HTML5





Structure











Ana Brierson



Content








...









4

CIS1019-N Web and Mobile Development

19/06/2017

Mobile View

Does it validate?

https://validator.w3.org/

CSS3

Ana Brierson

5

CIS1019-N Web and Mobile Development

19/06/2017

Levels of CSS Style
1.
2.
3.

Inline styles appear in the element itself
(single document)
Document-level styles appear in the head of the document
(single document)
External style sheets are in separate files
(multi-document/site)
A  tag is used to specify that the browser is to fetch and
use an external style sheet file


4.

Browser’s built-in styles

CSS Hierarchy/Cascade

http://webstyleguide.com/wsg3/5-sitestructure/3-site-file-structure.html

Ana Brierson

6

CIS1019-N Web and Mobile Development

19/06/2017

Recap CSS Rules





Simple Selector





The selector is a tag name or a list of tag names, separated
by commas
Examples:
h1 {font-size: 24pt;}
h2, h3 {font-size: 20pt;}
Contextual selectors
Apply style only to elements in specified position in body of
document
 List element hierarchy


body p b {font-size: 30pt}

Ana Brierson

7

CIS1019-N Web and Mobile Development

19/06/2017

Class Selector





Used to allow different occurrences of the same tag to
have different style specifications
A style class has a name, which is attached to a tag
name

p.narrow {property:value list}
p.wide {property:value list}

The class you want on a particular occurrence of a tag is
specified with the class attribute of the tag

 ... 
...
 ... 

Generic Selectors





Ana Brierson

A generic class can be defined if you want a style to apply
to more than one kind of tag
A generic class must be named, and the name must begin
with a period
.really-big { … }

Use in body of doc like normal style class

 … 
...
 … 

8

CIS1019-N Web and Mobile Development

19/06/2017

id Selectors


An id selector allow the application of a style to one specific
element
General form:



In HMTL :



#specific-id {property:value list}



3. Properties for sale



Pseudo Classes





Pseudo classes are styles that apply when something
happens, rather than because the target element simply
exists
Names begin with colons
hover class applies when the mouse cursor is over the
element:

article ul li a:hover{
color: #fff ;
}

Ana Brierson

9

CIS1019-N Web and Mobile Development

19/06/2017

CSS Box Model

height

width

width:500px;
height: 200px;
padding:10px;
border:2px solid green;
margin:10px;

Mobile-first Liquid Layout
Five steps to a liquid layout!

Ana Brierson

10

CIS1019-N Web and Mobile Development

19/06/2017

5-Steps Summary
• tag {
background-color:
#value;
}

Show
structure

•*{
margin: 0;
padding: 0;
}

Remove
margins

1

• nav li {
display: inline-block;
width: 100%;
}

Style
Navigation

4

2

• body {
margin-left: 15%;
margin-right:
15%;
}

Centre
Page

3

• img {
width: 100px;
height: 100px;
background-color: lightgray;
}

Style Image
placeholders

5

What next?







Ana Brierson

CSS3 id selector for the banner image?
CSS3 class selector for the social media icons?
Adding actual images (to an images folder)?
Writing the editorial text?
Creating hyperlink placeholders?
Thinking about the cascade

11

CIS1019-N Web and Mobile Development

19/06/2017

Can you ...?





Ana Brierson

ILOs

 Name

the main HTML5 structural tags
 Use HTML5 structural tags for page development
 Describe CSS3 selectors
 Validate your HTML
 Validate your CSS

How have we done that?
What can you do to reinforce and extend?

12



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.7
Linearized                      : No
Warning                         : Info object (139 0 obj) not found at 938669

EXIF Metadata provided by EXIF.tools