CODING FOR BEGINNERS: HTML AND CSS
|
|
|
- Sophie Hardy
- 7 years ago
- Views:
Transcription
1 GENERAL ASSEMBLY CODING FOR BEGINNERS: HTML AND CSS By Chen Hui Jing
2 GENERAL ASSEMBLY ABOUT WEB DEVELOPMENT
3 WHAT IS WEB DEVELOPMENT? The process of building websites
4 HOW TO GET STARTED? Your computer A clear mind This image is pure CSS. Modified from this brilliant codepen by Will Paige
5 CODE IS NUMBERS, LETTERS AND SYMBOLS Regardless of what programming language you use, all code can be read in any text editor. Javascript close: function () { this.ul.setattribute this.index = -1; $.fire(this.input, " }, Code credit: Lea Verou Code credit: C #include "8cc.h" static int count_leadi for (int i = 7; i >= if ((c & (1 << i return 7 - i return 8; } Rui Ueyama Assembly ctable segment para db 9 dup(' ') db 9,10,' ',12,13 db 13 dup(' ') db 27 db 4 dup(' ') db '!"#$%&',39,' db 'ABCDEFGHIJKLM Code credit: Happy codings
6
7
8 TOOLS WE'LL BE USING Text editor: Atom (open-source software) Browser: Chrome (excellent Dev Tools) Note that these tools are just that, tools. You can choose to use other text editors and browsers as well. These were chosen because of some conveniences they afford.
9 GENERAL ASSEMBLY INTERNET BASICS
10 ADVANCED RESEARCH PROJECTS AGENCY (ARPA) Set up in 1958 for R&D to expand the frontiers of technology and science Computers used to be monoliths which couldn't communicate with each other Best and brightest minds in the country came up with the concept of computer networking
11 PACKET SWITCHING TECHNOLOGY Traditional communication networks used analog, circuit switching Circuit switching is like an MRT train running on tracks, while packet switching is like cars on the Expressways
12 PROTOCOLS Transmission Control Protocol (TCP) handles breaking up data into packets to be sent and reassembling them at their destination Internet Protocol (IP) handles the formatting and addressing of the data packets Every device connected to the internet needs a unique IP address
13 TCP/IP Transmission of data makes use of 4 layers Sending Receiving Application layer HTTP, FTP, SMTP etc. Application layer Transport layer TCP, UDP Transport layer Internet layer IPv4, IPv6 Internet layer Link layer MAC, ADP Link layer
14 WORLD WIDE WEB Invented by Tim Berners-Lee in 1989 Created the 3 essential technologies that power the World Wide Web: 1. Hypertext Transfer Protocol (HTTP) for retrieving text from other documents via hypertext links 2. Uniform Resource Identifier (URI) which is the unique identifier for every resource on the web 3. Hypertext Markup Language (HTML) for structuring and presenting content on the web
15
16
17
18
19
20
21 ABSOLUTE VS. RELATIVE LINKS Absolute paths ask for a file from a specific location, which includes the protocol and server. <a href=" Relative paths ask for a file without specifying a server. <a href="gallery.html">gallery<a> The browser will hence assume you're referring to the same server as the page you're on.
22 GENERAL ASSEMBLY CREATE YOUR FIRST PROJECT
23
24 GENERAL ASSEMBLY HYPERTEXT MARK-UP LANGUAGE (HTML)
25 HYPERTEXT MARK-UP LANGUAGE (HTML) Structures the document and tells browsers what a certain element's function is Content is "marked-up" using tags Tags usually (but not always) come in pairs, <p>this is an example of a paragraph element</p> The opening tag, closing tag and everything in between is a HTML element
26 STRUCTURE OF HTML DOCUMENT <!DOCTYPE html> <html> <head> <title>example page</title> </head> <body> <h1>hello world</h1> </body> </html>
27 DOCUMENT TYPE ELEMENT <!DOCTYPE html> Appears just above the <html> tag Tells the browser to render the HTML in standards mode Let's validation software know which version of HTML to validate against Advised to use the HTML5 doctype
28 <html> ELEMENT <html lang="en"> // HTML code for web page </html> Represents the root of an HTML document Encouraged to specify a language attribute Language attribute aids speech synthesis (screen readers), translation tools and other language-related functionality
29 <head> ELEMENT <head> <meta charset="utf-8"> <title>your site title</title> <meta name="description" content="a short description of your websi <meta name="author" content="your name"> <link rel="stylesheet" href="css/styles.css?v=1.0"> </head> Contains instructions for the browser and meta data for the website Title and description are what shows up on search engine results Stylesheets are also declared here
30 <body> ELEMENT <body> <header> <img src="img/logo.png" alt="site logo"> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> <main> <h1>page header</h1> <p>some content in a paragraph. Brownie tiramisu toffee sweet r <main> </body> Represents the main content of the document Should only be one <body> element on a web page
31 FORMATTING YOUR WEB PAGE <address> <article> <footer> <header> <h1> <h2> <h3> <h4> <h5> <h6> <hgroup> <nav> <section> <dd> <div> <dl> <dt> <figcaption> <figure> <hr> <li> <main> <ol> <p> <pre> <ul> <caption> <col> <colgroup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <button> <datalist> <fieldset> <form> <input> <keygen> <label> <legend> <meter> <optgroup> <option> <output> <progress> <select> <details> <dialog> <menu> <menuitem> <summary> <abbr> <b> <bdi> <bdo> <br> <cite> <code> <data> <dfn> <em> <i> <kbd> <mark> <q> <rp> <rt> <rtc> <ruby> <s> <samp> <small> <span> <strong> <sub> <sup> <time> <u> <var> <wbr> <area> <audio> <map> <track> <video> <embed> <object> <param> <source> <canvas> <noscript> <script> <del> <ins>
32
33
34 BLOCK-LEVEL ELEMENTS Block-level elements take up the entire width of the container. RAINBOWS A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light in water droplets resulting in a spectrum of light appearing in the sky. COLOURS Red Orange Yellow Green Blue Indigo Violet The block-level tags shown in this example are h1, h2, p, ul and li. You can refer to the full list of block-level elements here.
35 INLINE-LEVEL ELEMENTS If an element is NOT block-level, it is inline. Accordingly, the Munsell colour system (a 20th-century system for numerically describing colours, based on equal steps for human visual perception) distinguishes 100 hues. <p class="ga-example-4">accordingly, <a href=" Commonly used inline-level tags include a, input, label, img and so on. Full list of inline-level elements available here.
36 GENERAL ASSEMBLY CASCADING STYLE SHEETS (CSS)
37 CASCADING STYLE SHEETS (CSS) Tells the browser how to display a certain element Follows the general ruleset: 1. Select the HTML element to be styled 2. Specify the properties of the element to be styled 3. Give the values we want each property to have
38 STRUCTURE OF A CSS RULE selector { property1: value; property2: value; property3: value; } The selector identifies which HTML elements the rule will be applied to The curly braces contain the property-value pairs, separated with semi-colons The properties define the style of the selected element The values are dependent on the property, and indicate the value of the properties to be set
39 TYPES OF CSS SELECTORS Element: matches all the elements of that name on the page p {} Class: matches all the elements with the specified class attribute, e.g. <div class="example">.example {} ID: matches the element with the specified id attribute, e.g. <div id="example"> #example {}
40 DESCENDENT SELECTORS Used to select tags that are children of other tags <ul> <li>4 large eggs</li> <li>1/4 cup milk</li> <li>2 tsp. butter</li> </ul> <ol> <li>beat eggs, milk, salt and pe <li>heat butter in large nonstic <li>continue cooking pulling, </ol> ul li { color: green; } 4 large eggs 1/4 cup milk 2 tsp. butter 1. BEAT eggs, milk, salt and pepper in medium bowl until blended. 2. HEAT butter in large nonstick skillet over medium heat until hot. POUR IN egg mixture. As eggs begin to set, GENTLY PULL the eggs across the pan with a spatula, forming large soft curds. 3. CONTINUE cooking pulling, lifting and folding eggs until thickened and no visible liquid egg remains. Do not stir constantly. REMOVE from heat. SERVE immediately. Selector list is read from right-to-left, with the leftmost being the parent.
41 PSEUDO-SELECTORS Applies to selectors when certain conditions occur a { /* removes underlines from all text links */ text-decoration: none; } a:hover { /* adds an underline and makes the font green when hovered */ text-decoration: underline; color: green; } Link 1 Link 2 Link 3 There are many other pseudo-selectors you can use as well. The full list is available here.
42
43 WHEN TO USE MARGIN Margin controls the space between elements. h2 { margin: 5px 0 5px 0; } h2 { margin: 20px 0 20px 0; } RAINBOWS A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light. COLOURS Red Orange Yellow RAINBOWS A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light. COLOURS Red Orange Yellow
44 WHEN TO USE PADDING Padding controls the size of the box without adjusting the size of the content within it. h2 { padding: 0; } h2 { padding: 20px 0 20px 0; } RAINBOWS A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light. COLOURS Red Orange Yellow RAINBOWS A rainbow is a meteorological phenomenon that is caused by reflection, refraction and dispersion of light. COLOURS Red Orange Yellow
45 WHERE TO WRITE YOUR STYLES Browsers will pick up your CSS if they are between a <style> tags which is a child of the <head> tag. <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> </style> </head>
46 USE A SEPARATE CSS FILE As your site grows, you'll have many more styles, so it's better to move them all into a separate file. <!DOCTYPE html> <html lang="en"> <head> <link type="text/css" rel="stylesheet" href="main.css"> </head> In this example, we are using main.css but you can name the file anything. This file will hold all your CSS and be linked in the <head> of every page.
47 CSS SPECIFICITY Inline styles IDs Classes, Elements attributes and pseudo- and pseudo- elements classes ul { // CSS properties }.class-1.class-2 p { // CSS properties } #id-1.class-3 div { // CSS properties } 0, 0, 0, 1 0, 0, 2, 1 0, 1, 1, 1
48 GENERAL GUIDELINES FOR WRITING CSS Declare your styles from lowest specificity then move up Keep your specificity as low as possible Name your classes sensibly Never style IDs Don't write inline styles
49 GENERAL ASSEMBLY USING IMAGES
50 TYPES OF IMAGES Content images contain relevant information help the user understand the content Background images decorative in nature contribute to the overall look and feel of the site
51 CONTENT IMAGES Content images are created using the <img> tag <img src="path/to/image" alt="description of the image"> Doesn't need a closing tag. Requires a <src> attribute to tell the browser where to find the image file Requires an <alt> attribute which describes the image or its purpose
52 BACKGROUND IMAGES Background images are set via CSS There are several properties related to backgrounds: background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-clip: border-box background-attachment: scroll background-color: transparent background is one of many CSS properties that can be written in shorthand.
53 SETTING BACKGROUND IMAGES background-image can use relative or absolute paths div { background-color: #170104; background-image: url('img/backg } This is a div with a background image It's advisable to set a background-color as a fallback for the background image
54 BACKGROUND-POSITION This is used to set the position of the image div { background-color: #170104; background-image: url('img/backg background-position: center cent } div { background-color: #170104; background-image: url('img/backg background-position: left bottom } Position has been set to center center Position has been set to left bottom
55
56 GENERAL ASSEMBLY WEB ACCESSIBILITY
57 SEMANTICS AND ACCESSIBILITY To make the web easier to use and access, and available to everyone Encompasses all disabilities, including visual, auditory, physical, speech, cognitive and neurological disabilities Benefits people without disabilities as well Accessible websites benefit from search engine optimisation (SEO)
58 BASIC ACCESSIBILITY CHECKLIST (1/2) Page title: To adequately and briefly describe the content of the page Image text alternatives: To make visual information accessible Headings: To provide meaningful hierarchy for facilitation of navigation Contrast ratio: To have sufficient luminance contrast ratio, for people with different requirements Resize text: To ensure visibility and usability as text size increases
59 BASIC ACCESSIBILITY CHECKLIST (2/2) Keyboard access & visual focus: To provide full functionality through a keyboard, and visible focus with logical order Forms, labels & errors: To have proper labels, keyboard access, clear instructions, and effective error handling Multimedia alternatives: To have alternative formats for audio and visual impaired Visit Web Accessibility Initiative (WAI) to understand more about this important aspect of the web
60 GENERAL ASSEMBLY RESOURCES
61 TO FIND OUT MORE... Dash (online course) Codeacademy (online course) Bento (online resources) Mozilla Developer Network (MDN) (website) HTML & CSS: Design and Build Web Sites by Jon Duckett (book) Designing with Web Standards by Jeffrey Zeldman (book)
62 SIGN UP FOR GA COURSES Web Development Immersive (full-time) Front-end development (part-time) Javascript development (part-time) Back-end development (part-time) Various classes and workshops
63 GENERAL ASSEMBLY THE @huijing
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Fast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
Web Development I & II*
Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
CIS 467/602-01: Data Visualization
CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
Unlocking the Java EE Platform with HTML 5
1 2 Unlocking the Java EE Platform with HTML 5 Unlocking the Java EE Platform with HTML 5 Overview HTML5 has suddenly become a hot item, even in the Java ecosystem. How do the 'old' technologies of HTML,
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Differences between HTML and HTML 5
Differences between HTML and HTML 5 1 T.N.Sharma, 2 Priyanka Bhardwaj, 3 Manish Bhardwaj Abstract: Web technology is a standard that allow developing web applications with the help of predefined sets of
WEB DEVELOPMENT IA & IB (893 & 894)
DESCRIPTION Web Development is a course designed to guide students in a project-based environment in the development of up-to-date concepts and skills that are used in the development of today s websites.
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Responsive Web Design Creative License
Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.
Appendix H: Cascading Style Sheets (CSS)
Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE
SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
Interactive Data Visualization for the Web Scott Murray
Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding
Foundations. Web Development and Design. with HTML5. [Terry Ann Felke-Morris, Ed.D.J. 6th Edition. Harper College. Piyali Sengupta.
6th Edition Web Development and Design Foundations with HTML5 [Terry Ann Felke-Morris, Ed.D.J Professor Harper College International Edition contributions by Piyali Sengupta PEARSON Boston Columbus Indianapolis
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
Level 1 - Clients and Markup
Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML
Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1
Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication
Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication HTML5 HTML5 is the most recent version of Hypertext Markup Language. It's evolution
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
CLASSROOM WEB DESIGNING COURSE
About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
Introduction to Web Technologies
Introduction to Web Technologies Tara Murphy 17th February, 2011 The Internet CGI Web services HTML and CSS 2 The Internet is a network of networks ˆ The Internet is the descendant of ARPANET (Advanced
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Accessibility Guidelines Bell.ca Special Needs. Cesart April 2006
Cesart April 2006 Created by: Dominic Ricard & Loïc Nunes Effective Date: April 2006 TABLE OF CONTENTS 1 Introduction...4 2 Target Audience...5 3 Copy Decks...5 3.1 Document structure... 5 3.1.1 Headings/titles...
WRITE BETTER HTML BY WRITING BETTER CSS
WRITE BETTER HTML BY WRITING BETTER CSS THE ROYAL WE Chris Coyier @chriscoyier BETTER? 1 Less of it 2 More Semantic 3 More Accessible 4 Futureproof // Speed // Maintainability // SEO // Happy People 123
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
Web Authoring. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
Voluntary Product Accessibility Template Blackboard Learn Release 9.1 April 2014 (Published April 30, 2014)
Voluntary Product Accessibility Template Blackboard Learn Release 9.1 April 2014 (Published April 30, 2014) Contents: Introduction Key Improvements VPAT Section 1194.21: Software Applications and Operating
Programming exercises (Assignments)
Course 2013 / 2014 Programming exercises (Assignments) TECHNOLOGIES FOR DEVELOPING WEB USER INTERFACES Websites (HTML5 and CSS3) Table of contents Technologies for developing web user interfaces... 1 Websites
Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland
Mobile Publishing MARCO GIARDINA a,b a Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland b Sensiel Research, Bern, Switzerland Faculty of Economic Sciences,
Accessibility in e-learning. Accessible Content Authoring Practices
Accessibility in e-learning Accessible Content Authoring Practices JUNE 2014 Contents Introduction... 3 Visual Content... 3 Images and Alt... 3 Image Maps and Alt... 4 Meaningless Images and Alt... 4 Images
Oct 15, 2004 www.dcs.bbk.ac.uk/~gmagoulas/teaching.html 3. Internet : the vast collection of interconnected networks that all use the TCP/IP protocols
E-Commerce Infrastructure II: the World Wide Web The Internet and the World Wide Web are two separate but related things Oct 15, 2004 www.dcs.bbk.ac.uk/~gmagoulas/teaching.html 1 Outline The Internet and
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
Chapter 1 Introduction to web development and PHP
Chapter 1 Introduction to web development and PHP Murach's PHP and MySQL, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Use the XAMPP control panel to start or stop Apache or MySQL
WCAG 2.0 Checklist. Perceivable Web content is made available to the senses - sight, hearing, and/or touch. Recommendations
WCAG 2.0 Checklist Perceivable Web content is made available to the senses - sight, hearing, and/or touch Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content Success Criteria
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
Introduction to web development and JavaScript
Objectives Chapter 1 Introduction to web development and JavaScript Applied Load a web page from the Internet or an intranet into a web browser. View the source code for a web page in a web browser. Knowledge
Modern Web Development From Angle Brackets to Web Sockets
Modern Web Development From Angle Brackets to Web Sockets Pete Snyder Outline (or, what am i going to be going on about ) 1.What is the Web? 2.Why the web matters 3.What s unique about
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00
Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
01/42. Lecture notes. html and css
web design and applications Web Design and Applications involve the standards for building and Rendering Web pages, including HTML, CSS, SVG, Ajax, and other technologies for Web Applications ( WebApps
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
Responsive Web Design: Media Types/Media Queries/Fluid Images
HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.
Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY
Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
Web Accessibility means that a website is accessible if everyone, regardless of ability, can access the website and retrieve all the information
Web Accessibility Web Accessibility means that a website is accessible if everyone, regardless of ability, can access the website and retrieve all the information available using any web browser on any
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Web Design & Development - Tutorial 04
Table of Contents Web Design & Development - Tutorial 04... 1 CSS Positioning and Layout... 1 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 2 Layout with CSS... 3 Review the
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
MCH Strategic Data Best Practices Review
MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative
JISIS and Web Technologies
27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Citrix StoreFront. Customizing the Receiver for Web User Interface. 2012 Citrix. All rights reserved.
Citrix StoreFront Customizing the Receiver for Web User Interface 2012 Citrix. All rights reserved. Customizing the Receiver for Web User Interface Introduction Receiver for Web provides a simple mechanism
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
Developers Guide. Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB. Version: 1.3 2013.10.04 English
Developers Guide Designs and Layouts HOW TO IMPLEMENT WEBSITE DESIGNS IN DYNAMICWEB Version: 1.3 2013.10.04 English Designs and Layouts, How to implement website designs in Dynamicweb LEGAL INFORMATION
WordPress and HTML Basics
WordPress and HTML Basics Intro: Jennifer Stuart Graphic Design background - switched to Web Design (1998) Started blogging in 2001 Became Interested in Javascript, PHP, etc. 2004 - Moved to WordPress
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Coding HTML Email: Tips, Tricks and Best Practices
Before you begin reading PRINT the report out on paper. I assure you that you ll receive much more benefit from studying over the information, rather than simply browsing through it on your computer screen.
WEB DESIGN COURSE CONTENT
WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
The Web as a Client-Server System; TCP/IP intro!
The Web as a Client-Server System; TCP/IP intro! Engineering Software as a Service 2.1 2.2" Armando Fox! 2013 Armando Fox & David Patterson, all rights reserved 1! 2! Web at 100,000 feet! The web is a
Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation
Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
Course: CSC 224 Internet Technology I (2 credits Compulsory)
Course: CSC 224 Internet Technology I (2 credits Compulsory) Course Duration: Two hours per week for 15weeks, ((15 hours) Theory and (45 hours) Practical), as taught in 2010/2011 session Lecturer: Abikoye,
MAGENTO THEME SHOE STORE
MAGENTO THEME SHOE STORE Developer: BSEtec Email: support@bsetec.com Website: www.bsetec.com Facebook Profile: License: GPLv3 or later License URL: http://www.gnu.org/licenses/gpl-3.0-standalone.html 1
Positioning Container Elements
Advanced Lesson Group 3 - Element Positioning with CSS Positioning Container Elements The position: style property is used to move block elements to a specific location on the web page. The position style
Learning Web Design. Third Edition. A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics. Jennifer Niederst Robbins
Learning Web Design Third Edition A Beginner's Guide to (X)HTML, Style Sheets, and Web Graphics Jennifer Niederst Robbins O'REILLY Beijing- Cambridge Farnham Koln Paris Sebastopol -Taipei -Tokyo CONTENTS
Eloqua Email 101. What is this and why should I read it?
DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them
HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer
HTML5 & CSS3 ( What about SharePoint? ) presented by @kyleschaeffer The Agenda HTML5 What is it? What can it do? Does SharePoint do HTML5? CSS3 What is it? What can it do? Does SharePoint do CSS3? HTML5
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
What is a Web Browser? Web Site Functionality. A client program that uses HTTP to communicate with web servers.
What is a Web Browser? Web Site Functionality April 1, 2004 A client program that uses HTTP to communicate with web servers. HTML interpreter Reads HTML, determines how to display it A Simple HTML file
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
M3-R3: INTERNET AND WEB DESIGN
M3-R3: INTERNET AND WEB DESIGN NOTE: 1. There are TWO PARTS in this Module/Paper. PART ONE contains FOUR questions and PART TWO contains FIVE questions. 2. PART ONE is to be answered in the TEAR-OFF ANSWER
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running
Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create