Skill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)
|
|
- Abigayle Hampton
- 6 years ago
- Views:
Transcription
1 Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD)
2 323.4 Use graphics and objects on Web Page (7 hrs) Insert foreground features Modify image attributes Create Layout with background image Change background colour of a web page Insert Different objects on a web page
3 HTML Images In HTML, images are defined with the <img> tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" alt="some_text"/>
4 HTML Images (cont) Images may be used on web pages in several ways: As a simple image: an image can be used on a web page as it is used in print, as a static image that adds information, such as company logo or an illustration As a link: an image can be used as a link to another document by placing it in the anchor element.
5 HTML Images (cont) As an imagemap: an imagemap is a single image that contains multiple links ( hotspots ) that link to other documents
6 Insert Images & Image as Links You can easily insert pictures located in other folders, or even pictures that are located on other websites: Example: <img src="images/logo.png" /> Example: <img src=" />
7 Images as Links Images can be links: Example: <a href=" <img src="logo.png" /></a>
8 Alternative Attribute The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute: Example 5: <img src="logo.gif" alt="html.net logo" />
9 Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="pulpit.jpg" alt="pulpit rock" width="304" height="228" /> Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
10 HTML Image Tags Tag <img /> <map> <area /> Description Defines an image Defines an image-map Defines a clickable area inside an imagemap
11 E X E R C I S E
12 What is CSS? CSS is an acronym for Cascading Style Sheets. CSS is a style language that defines layout of HTML documents. CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things.
13 What is CSS? (cont) HTML can be used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. CSS also helps to create a more consistent look for your website design throughout.
14 HTML vs CSS HTML is used to structure content. CSS is used for formatting structured content.
15 Advantages of CSS Control layout of many documents from one single style sheet (just one!) More precise control of layout Apply different layout to different media-types (screen, print, etc.) Numerous advanced and sophisticated techniques
16 Basic CSS syntax Let's say we want a nice red color as the background of a webpage: <body bgcolor="#ff0000"> Using HTML we could have done it like this: body {background-color: #FF0000;} With CSS the same result can be achieved like this:
17 Basic CSS Syntax Sample
18 Applying CSS to a HTML Document There are three ways you can apply CSS to an HTML document: 1. Inline method 2. Internal method 3. External Method
19 Applying CSS to a HTML Document (cont) Method 1: In-line (the attribute style) One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the red background color, it can be applied like this: <html> <head> <title>example</title> </head> <body style="background-color: #FF0000;"> <p>this is a red page</p> </body> </html>
20 Inline Method Tag Final Result
21 Applying CSS to a HTML Document (cont) Method 2: Internal (the tag style) Another way is to include the CSS codes using the HTML tag <style>. For example like this: <html> <head> <title>example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> </body> </html> <p>this is a red page</p>
22 Applying CSS to a HTML Document (cont) Method 3: External (link to a style sheet) The recommended method is to link to a so-called external style sheet. An external style sheet is simply a text file with the extension.css. Like any other file, you can place the style sheet on your web server or hard disk.
23 Applying CSS to a HTML Document (cont) For example, let's say that your style sheet is named style.css and is located in a folder named style. The situation can be illustrated like this:
24 Applying CSS to a HTML Document (cont) To create a link from the HTML document (default.htm) to the style sheet (style.css). Such link can be created with one line of HTML code: <link rel="stylesheet" type="text/css" href="style/style.css" /> Notice how the path to our style sheet is indicated using the attribute href. The line of code must be inserted in the header section of the HTML code i.e. between the <head> and </head> tags. Like this: <html> <head> <title>my document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body>
25 Hexadecimal Color Palettes The W3C HTML 4.01 specification defines 16 named colours:
26 E X E R C I S E
27 Extra Information Other CSS styles and format is available in.pdf format. CSS_tips_lessons.pdf
28 Dreamweaver Activity Insert foreground features Modify image attributes Create background color of a web Insert objects on a web page
29 References asp p
30
HTML Images - The <img> Tag and the Src Attribute
WEB DESIGN HTML Images - The Tag and the Src Attribute In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only, and has no closing tag.
More informationIntroduction to WEB PROGRAMMING
Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationCS134 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? a. www.whitehouse.gov
More informationCSS: Cascading Style Sheets
CSS: Cascading Style Sheets Computer Science and Engineering College of Engineering The Ohio State University Lecture 13 Evolution of CSS MIME type: text/css CSS 1 ('96): early recognition of value CSS
More informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 Niederst, Part III (3rd edn) 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and
More informationHTML TIPS FOR DESIGNING.
This is the first column. Look at me, I m the second column.
More informationHTML Text Formatting. HTML Session 2 2
HTML Session 2 HTML Text Formatting HTML also defines special elements for defining text with a special meaning. - Bold text - Important text - Italic text - Emphasized text
More informationTable of Contents Chapter 9. Working with Cascading Style Sheets ... 1
Table of Contents Chapter 9.... 1 Introduction... 1 Introducing Cascading Style Sheets... 2 Create CSS Styles... 2 Attribute Styles... 2 Style Types... 3 Creating a Web Page with a CSS Layout... 4 Create
More informationAttributes & Images 1 Create a new webpage
Attributes & Images 1 Create a new webpage Open your test page. Use the Save as instructions from the last activity to save your test page as 4Attributes.html and make the following changes:
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading
More information('cre Learning that works for Utah STRANDS AND STANDARDS WEB DEVELOPMENT 1
STRANDS AND STANDARDS Course 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
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationPage Layout Using Tables
This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,
More informationWith HTML you can create your own Web site. This tutorial teaches you everything about HTML.
CHAPTER ONE With HTML you can create your own Web site. This tutorial teaches you everything about HTML. Example Explained The DOCTYPE declaration defines the document type The text between and
More informationWhat is CSS? NAME: INSERT OPENING GRAPHIC HERE:
What is CSS? NAME: INSERT OPENING GRAPHIC HERE: Highlight VOCABULARY WORDS that you need defined. Put a? mark in any area that you need clarified. 1 What is CSS? CSS stands for Cascading Style Sheets Styles
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationCMPT 165 Unit 2 Markup Part 2
CMPT 165 Unit 2 Markup Part 2 Sept. 17 th, 2015 Edited and presented by Gursimran Sahota Today s Agenda Recap of materials covered on Tues Introduction on basic tags Introduce a few useful tags and concepts
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationAGENDA :: MULTIMEDIA TOOLS :: CLASS NOTES
CLASS :: 14 04.28 2017 3 Hours AGENDA CREATE A WORKS PAGE [ HTML ] :: Open index.html :: Save As works.html :: Edit works.html to modify header, 3 divisions for works, then add your content :: Edit index.html
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationCSS how to display to solve a problem External Style Sheets CSS files
WEB DESIGN What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External
More informationWeb Design and Development ACS-1809
Web Design and Development ACS-1809 Chapter 4 Cascading Style Sheet Cascading Style Sheets A style defines the appearance of a document A style sheet - a file that describes the layout and appearance of
More informationThe internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.
Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.
More informationCREATING A WEBSITE USING CSS. Mrs. Procopio CTEC6 MYP1
CREATING A WEBSITE USING CSS Mrs. Procopio CTEC6 MYP1 HTML VS. CSS HTML Hypertext Markup Language CSS Cascading Style Sheet HTML VS. CSS HTML is used to define the structure and content of a webpage. CSS
More informationHTML Hyperlinks (Links)
WEB DESIGN HTML Hyperlinks (Links) The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationCSS is applied to an existing HTML web document--both working in tandem to display web pages.
CSS Intro Introduction to Cascading Style Sheets What is CSS? CSS (Cascading Style Sheets) is a supplementary extension to allowing web designers to style specific elements on their pages and throughout
More informationIntroduction to web development and HTML MGMT 230 LAB
Introduction to web development and HTML MGMT 230 LAB After this lab you will be able to... Understand the VIU network and web server environment and how to access it Save files to your web folder for
More informationIn the early days of the Web, designers just had the original 91 HTML tags to work with.
Web Design Lesson 4 Cascading Style Sheets In the early days of the Web, designers just had the original 91 HTML tags to work with. Using HTML, they could make headings, paragraphs, and basic text formatting,
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More informationIntroduction to Cascading Style Sheet (CSS)
Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style
More informationChapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?
LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://
More informationCST272 ASP.NET Style Sheets Page 1
CST272 ASP.NET Style Sheets Page 1 1 2 3 4 5 6 Style Sheets in ASP.NET CST272 ASP.NET Creating Cascading Style Sheets (CSS) Stores information on how to present the site Cascading style sheets allow content
More informationIndex. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148
Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,
More informationBefore you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.
9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather
More informationChapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
More informationWEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:
WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters
More informationHTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية
HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for
More informationADOBE 9A Adobe Dreamweaver CS4 ACE.
ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without
More informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationUNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? editor editor Q.2: What do you understand by a web browser?
UNIT 3 SECTION 1 Answer the following questions Q.1: What is an editor? A 1: A text editor is a program that helps you write plain text (without any formatting) and save it to a file. A good example is
More information[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6
[AVWSQ-ADWCS6]: WSQ ICDL Adobe Dreamweaver CS6 Length : 2 Days Audience(s) : New or existing users Level : 3 Technology : Adobe Dreamweaver CS6 program Delivery Method : Instructor-Led (Classroom) Course
More informationBlackboard staff how to guide Accessible Course Design
The purpose of this guide is to help online course authors in creating accessible content using the Blackboard page editor. The advice is based primarily on W3C s Web Content Accessibility Guidelines 1.0
More informationLab Introduction to Cascading Style Sheets
Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,
More informationUsing Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
More informationDesigning for Web Using Markup Language and Style Sheets
Module Presenter s Manual Designing for Web Using Markup Language and Style Sheets Effective from: July 2014 Ver. 1.0 Amendment Record Version No. Effective Date Change Replaced Pages 1.0 July 2014 New
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationChapter 3 Style Sheets: CSS
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON Chapter 3 Style Sheets: CSS 1 Motivation HTML markup can be used to represent Semantics: h1 means that an element is a top-level heading
More informationScripting for Multimedia LECTURE 5: INTRODUCING CSS3
Scripting for Multimedia LECTURE 5: INTRODUCING CSS3 CSS introduction CSS Level 1 --> CSS Level 2 --> CSS Level 3 (in modules) More than 50 modules are published Cascading style sheets (CSS) defines how
More informationHTML + CSS. ScottyLabs WDW. Overview HTML Tags CSS Properties Resources
HTML + CSS ScottyLabs WDW OVERVIEW What are HTML and CSS? How can I use them? WHAT ARE HTML AND CSS? HTML - HyperText Markup Language Specifies webpage content hierarchy Describes rough layout of content
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 2
Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!
More informationUsing CSS in Web Site Design
Question 1: What are some of the main CSS commands I should memorize? Answer 1: The most important part of understanding the CSS language is learning the basic structure and syntax so you can use the language
More informationCS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS
Goals CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS Practice writing HTML Add links and images to your web pages Apply basic styles to your HTML This lab is based on
More informationWebsite Development (WEB) Lab Exercises
Website Development (WEB) Lab Exercises Select exercises from the lists below to complete your training in Website Development and earn 125 points. You do not need to do all the exercises listed, except
More informationSession 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style
Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use
More informationCIS 1350 Final Project Part 1 of 4
CIS 1350 Final Project Part 1 of 4 IMPORTANT NOTE: All the work you do in this section should be uploaded to the assignment drop box. Do NOT upload to the server. Failure to follow this warning will result
More informationCOMS 359: Interactive Media
COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More information1 of 7 8/27/2014 2:26 PM Units: Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Designing & Planning Web Pages This unit will give students a basic understanding of core design principles
More informationHTML and CSS: An Introduction
JMC 305 Roschke spring14 1. 2. 3. 4. 5. The Walter Cronkite School... HTML and CSS: An Introduction
More informationMRK260. Week Two. Graphic and Web Design
MRK260 Week Two Graphic and Web Design This weeks topics BASIC HTML AND CSS MRK260 - Graphic & Web Design - Week Two 2 Lesson Summary What is HTML? Introduction to HTML Basics Introduction to CSS Introduction
More informationHTML, CSS. Kristóf Kovács, Róbert Pálovics, Ferenc Wettl Kristóf Kovács, Róbert Pálovics, Ferenc Wettl HTML, CSS / 28
HTML, CSS Kristóf Kovács, Róbert Pálovics, Ferenc Wettl 2017-10-02 Kristóf Kovács, Róbert Pálovics, Ferenc Wettl HTML, CSS 2017-10-02 1 / 28 WWW 1 WWW The beginning The web simplified Cookies 2 HTML Content
More informationUsing Dreamweaver CS6
Using Dreamweaver CS6 7 Dynamic HTML Dynamic HTML (DHTML) is a term that refers to website that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and
More informationThe University of Hawaii at Manoa Library Webpage Content/Design/Style Guidelines General Site Design... 2
The University of Hawaii at Manoa Library Webpage Content/Design/Style Guidelines Compiled and authored by Beth Tillinghast, Chair, Library Website Redesign Committee Images provided by Wilbur Wong and
More informationMethods for configuring Cascading Style Sheets. Applying style to element name selectors. Style Rule Basics. CMPT 165: Cascading Style Sheets
CMPT 165: Cascading Style Sheets Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 7, 2011 Methods for configuring Cascading Style Sheets There are 4 method to
More informationWeb Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen
https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,
More informationHTTP & Websites. Web Browsers. Web Servers vs. Web sites. World Wide Web. Internet Explorer. Surfing the World Wide Web. Part 4. The World Wide Web
HTTP & Websites Web Browsers Part 4 Surfing the World Wide Web World Wide Web Web Servers vs. Web sites The World Wide Web massive collection of websites on the Internet they link to each other and form
More informationPage 1 of 11 Units: - All - Teacher: WebPageDesignI, CORE Course: WebPageDesignI Year: 2012-13 Introduction to the World of Web Standards Why do web development standards play a key role in the proliferation
More informationWEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 LEARNING OUTCOMES In this chapter, you will learn how to... Describe the evolution of style sheets from print media to the Web List
More informationHyper Text Markup Language HTML: A Tutorial
Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified
More informationWeb Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags Recap on HTML and creating our template file Introduction
More informationAGENDA. HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION <nav> :: CSS CODING FOR HOMEPAGE [ <nav> & child elements ] CLASS :: 13.
:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES CLASS :: 13 04.26 2017 3 Hours AGENDA HTML CODING YOUR HOMEPAGE [ Part IV ] :: NAVIGATION home works
More informationCE419 Web Programming. Session 3: HTML (contd.), CSS
CE419 Web Programming Session 3: HTML (contd.), CSS 1 Forms 2 Forms Provides a way to interact with users. Not useful without a server-side counterpart. 3 From Elements
More information* HTML BASICS * LINKING BY: RIHAM ALSMARI, PNU. Lab 2
* HTML BASICS * LINKING BY: RIHAM ALSMARI, PNU Lab 2 What is the output of the following HTML code? HTML Element Attributes.. Using Element Attributes 4 HTML elements can have attributes Attributes provide
More information.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube {
.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in;.tube { color: #996600; height: 3in; width: 12in; position: fixed; What is CSS? Cascading Style Sheets CSS is responsible
More information1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5
Name Date Final Exam Prep Questions Worksheet #1 1. The basic building block of an HTML document is called a(n) a. tag. b. element. c. attribute. d. container. Answer: b Page 5 2. Which of the following
More informationSession 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties
Session 4 Style Sheets (CSS) 1 Reading Reading & References en.wikipedia.org/wiki/css Style Sheet Tutorials www.htmldog.com/guides/cssbeginner/ A reference containing tables of CSS properties web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationMobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE
Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE COURSE TITLE WEB SITE DESIGN COURSE DURATION 19 Hours of Interactive Training COURSE OVERVIEW In this 7 session course Debbie will take you through the
More informationCascading style sheets, HTML, DOM and Javascript
CSS Dynamic HTML Cascading style sheets, HTML, DOM and Javascript DHTML Collection of technologies forming dynamic clients HTML (content content) DOM (data structure) JavaScript (behaviour) Cascading Style
More informationAbout the Tutorial. Dreamweaver MX overview
About the Tutorial Title: Intro to Macromedia Dreamweaver MX Description: This is a tutorial providing an overview of the Dreamweaver MXInterface Category: Html Author: Gregory Wehrman Email: wehrman@purdue.edu
More informationHTML, CSS, JavaScript
HTML, CSS, JavaScript Encoding Information: There s more! Bits and bytes encode the information, but that s not all Tags encode format and some structure in word processors Tags encode format and some
More informationWeb Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.
What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe
More informationCreating and Publishing Faculty Webpages
Creating and Publishing Faculty Webpages The UNF Template The template we are using today provides a professional page that is easy to work with. Because the pages are already built, faculty members can
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar. Hover Effect:
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover Effect: Images required: 58 x 1 px high background image (black gloss gradient) for the nav bar
More informationLearning DreamWeaver MX 2004
Contents Users Notes Software Requirements...xi The DW Support Files...xi Copying the DW Support Files...xi Windows Systems...xi Macintosh Systems...xi Using the Activities in Schools... xii The Chapter
More informationCOMP519 Web Programming Autumn Cascading Style Sheets
COMP519 Web Programming Autumn 2015 Cascading Style Sheets Content vs. Presentation Most HTML tags define content type, independent of how that content is to be presented. There are a few obvious exceptions
More information1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014
1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:
More informationWEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 In this chapter, you will learn how to... LEARNING OUTCOMES Code relative hyperlinks to web pages in folders within a website Configure
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need
More informationADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)
INTRO TO CSS RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY WEEK 1 HTML In Week
More informationObjective % Select and utilize tools to design and develop websites.
Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret
More informationNavigation. Websites need a formalized system of links to allow users to navigate the site
Comm 244 Week 3 Navigation Navigation Websites need a formalized system of links to allow users to navigate the site Navigation Many larger websites have multiple forms of navigation For example, look
More informationCMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB
CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 3 Cascading Style Sheets (CSS) Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you
More informationPositioning in CSS: There are 5 different ways we can set our position:
Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set
More information