Download In-Depth Introduction to HTML and CSS

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
Document related concepts

URL redirection wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

Transcript 
 In­Depth Introduction to HTML and CSS (5 days) Course Description… This course helps beginners and experienced students establish working knowledge of best practices in creating functional web pages using Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS). The intention is to break any existing bad habits and lay a strong foundation to ensure students are able to create pages that adhere to standards and best practices. Lecture and Hands­On exercise will help students to create easy­to­maintain, SEO­optimized, and accessible websites. Students will also learn valuable software tools to help them be more productive and successful in creating websites.
Learning Objectives… ●
●
●
●
●
●
●
●
●
●
●
Use best practices in structuring the content of websites Understand different HTML tags and when to use them Use software and browser tools to validate HTML and CSS Work with different <head> elements Create web pages that adhere to standards Include links, lists, forms, and images on pages Create tables for presenting data on pages Optimize page styles and layout with Cascading Style Sheets (CSS) Format text, use color, and backgrounds Create CSS based navigation Upload files to a live site Who should attend… Students who have not had formal in­depth training with HTML and CSS and wish to understand the best practices in using HTML for content and CSS for styling. Students who want to learn web design for their personal use or for business related purposes will benefit equally. Prerequisites… Students must have working knowledge of computers, using a mouse, keyboard, application menus and commands. Students must be able to open, save, and close files, as well as navigate to other folders. Intro­ HTML­CSS/ 1 Rev 10­15­4
www.karmoxie.com Course Topics… Part I HTML 1. Introduction Brief Web Technology history Adhering to the Standards The Anatomy of a Web Page Differences in Browsers & User agents HTML ○ The W3C (World Wide Web Consortium) ○ The WHATWG (Web Hypertext Application Technology Working Group) ○ What can You Do with HTML? ○ Versions of HTML including XHTML and HTML5 ○ Representing Structure of data in documents ● CSS ○ Separation of concerns ○ Using CSS for design and layout ○ Different Web Browsers ● Goals in Web Design ○ Responsiveness ○ Accessibility including screen reader considerations ○ Performance ●
●
●
●
●
2. Planning a Simple HTML Page ●
●
●
●
Determining content Structuring content Identifying text and image elements Tools and approaches to planning 3. Rules of Syntax ●
●
●
●
●
●
●
●
●
Importance of code compliance Doctype & Quirks Mode Defining semantic meaning with elements The DOM (document object model) Start and end tags The <head> and <body> sections Using attributes for additional information in start tags Named character references / entities Comments Intro­ HTML­CSS/ 2 Rev 10­15­4
www.karmoxie.com ●
Validating your HTML 4. Development Environments & Publishing Content ●
●
●
●
●
●
●
●
●
●
Using an HTML editor Writing code with a text editor WYSIWYG editors Browser developer tools Publishing documents to web servers Making a Connection with FTP Uploading Your Files Viewing Your Live Site MIME Type Identification Publish a Site on a Remote Server 5. What’s in your <head>? ●
●
●
●
●
●
Specifying a base URL for relative URLs Defining relationships between the current document and other resources Providing general information about a document for indexing and other purposes Referencing a scripting language processed on the client side Including CSS style information embedded into a page Defining the title of the web page 6. HTML Structural & Block­Level Elements What are block­level elements Using Headings to relay importance <h1> <h2> … <h6> Indicating a paragraph of text <p> Displaying pre­formatted text <pre> Indicating a block of quoted text using <blockquote> Creating a single line break <br /> Creating a horizontal rule <hr /> Dividing a page into separate sections with <div> Creating lists ○ Unordered lists <ul> ○ Ordered lists <ol> ○ Definition lists <dl> ○ Nested lists 7. HTML Text Formatting / Inline Elements ● White space ● Phrase elements ● When to emphasize text with <em> and <strong> ● Containing a citation or a reference to other sources with <cite> ● Indicating the defining instance of the enclosed term with <dfn> ●
●
●
●
●
●
●
●
●
Intro­ HTML­CSS/ 3 Rev 10­15­4
www.karmoxie.com ●
●
●
●
●
●
●
●
●
Designating a fragment of computer code with <code> Designates sample output from programs, scripts, etc. with <samp> Indicating text to be entered by the user with <kbd> Indicating an instance of a variable or program argument with <var> Indicating an abbreviated form (e.g., WWW, HTTP, etc.) with <abbr> Indicating an acronym (e.g., WAC, radar, etc.) with <acronym> Subscripts and superscripts: <sub> and <sup> The plain hyphen and the soft hyphen Marking document changes with <ins> and <del> 8. Adding Optimized Inline Images ●
●
●
●
●
●
The <img> element
Image sources Image size and resolution PNG­8 “Alpha” transparency Introduction to SVG General optimization strategies for images and file sizes
9. Adding Links to Web Pages Anchor tags The href Attribute Linking to pages on the web Linking within your own site Targeting a new browser window ● Creating image links ● Creating email links ● Creating telephone links
●
●
●
●
●
10.
●
●
●
●
11.
●
●
●
●
●
●
12.
Basic Table Markup How tables should be used Creating minimal table structure Table headers Table accessibility Forms How forms work The form Element Variables and content Form controls Form accessibility features Form layout and accessibility with <label> Embedding using Inline Frame Element <iframe> ● A Window in a Window (iframe) Intro­ HTML­CSS/ 4 Rev 10­15­4
www.karmoxie.com ● Setting height and width ● Removing the border ● Targeting links to iframes Part II
13.
Cascading Style Sheets ● The benefits of CSS ● Ways to add CSS rules and best practices with external, embedded, inline ● Applying a basic CSS rule using HTML, class and id selectors ● Tools for validating CSS 14.
●
●
●
●
15.
●
●
●
●
●
●
●
●
16.
●
●
●
●
●
17.
●
●
●
●
●
●
Colors and Backgrounds Ways to specify color values Background color Playing with opacity Background images Formatting Text The font properties Changing text color Underlines and other text­decoration Changing capitalization Text Shadow Changing lists: bullets and numbers Format images Format links The Very Important Box Model Elements as boxes Specifying box dimensions Margins Padding Borders Floating, Positioning, and Page Layout Normal Flow Floating Positioning Basics Relative Positioning Absolute Positioning Fixed Positioning Intro­ HTML­CSS/ 5 Rev 10­15­4
www.karmoxie.com ● Page layout strategies & techniques ● Multicolumn layouts using floats ● Top­to­Bottom Column Backgrounds 18.
●
●
●
●
●
●
CSS Techniques Using a CSS Reset Image Replacement Techniques CSS Sprites Styling forms Styling tables Basic responsive web design 19.
Managing CSS ● Apply advanced CSS selectors ● Apply browser­specific CSS ● Create a printer stylesheet using CSS 20.
Creating Advanced Navigation ● Create CSS­Based Menus ● Incorporate images in CSS­Based Menus ● Create image maps 21.
Beyond the Basics: an Overview ● HTML5 Features ● CSS: LESS ● CSS: SASS Intro­ HTML­CSS/ 6 Rev 10­15­4
www.karmoxie.com
Related documents
Introduction to CSC110
Introduction to CSC110
Front End Design
Front End Design
Homework One: Solutions
Homework One: Solutions
web tip - National Cheng Kung University
web tip - National Cheng Kung University
Web Design Basics Web Design Basics
Web Design Basics Web Design Basics
Lecture 7
Lecture 7
Sharing the road assessment
Sharing the road assessment
You should build a respectable set of web pages that tells me, the
You should build a respectable set of web pages that tells me, the
What are the three main parts of a web page
What are the three main parts of a web page
CSCI 6961: Client-Side Web Development and Programming
CSCI 6961: Client-Side Web Development and Programming
CPIS 358 - The Lab Note
CPIS 358 - The Lab Note
Basics of HTML
Basics of HTML