Web Site Design and Development Lecture 3. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
|
|
- Jayson Hines
- 5 years ago
- Views:
Transcription
1 Web Site Design and Development Lecture 3 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
2 A note on HTML elements When I refer to an HTML element, I will just use the name unless the name is only one character. For example <head> will be head <title> will be title <p> will be <p> <a> will be <a> For elements that have unique attributes, I may not list all of the attributes. Instead I will list the ones that are useful to know for now. Additional attributes will be introduced as they are needed. 2
3 Children of the head element As you will recall, the head element contains information about the HTML document. Elements found within the head element Title Link Meta 3
4 The title element The title element is a regular element that contains the title for the web page. The title element is required for valid HTML5. The title is shown in the web browser s tab and title bar. The title should be unique for every page on a web site. That unique title should describe what is on the page. Search engines use title elements in their search results. 4
5 Example title elements <title>my Web Site Home</title> <title>chicken Pot Pie Recipe</title> 5
6 The link element The link element is an empty element that is used to link the web page to another fle. Attributes rel: the relationship between the web page and the fle Common rel values stylesheet: link is to a style sheet icon: link is to a favicon (may see as shortcut icon) href: a URL pointing to the linked fle 6
7 What is a favicon? A favicon is the image that is shown to the left of the title in the browser s tab and bookmarks. A favicon is an image of type.ico. Favicons are typically named favicon.ico but this is not required. If you use the name favicon.ico and place the fle in your web site s root folder, you will not need to include the link element for it. 7
8 Example link elements <link rel= shortcut icon href= favicon.ico > <link rel= shortcut icon href= images/logo.ico > <link rel= stylesheet href= css/style.css > 8
9 The meta element The meta element is an empty element that is used to add additional metadata about your web page. Attributes charset: declares the character encoding used by the HTML fle name: the name of the metadata content: the content of the metadata The metadata description is used in search results. The metadata keywords used to be used by Google and Bing and may still be used by other search engines. 9
10 Example meta elements <meta charset= UTF-8 > <meta name= description content= The best chicken pot pie recipe that you will ever have > <meta name= keywords content= chicken, pot pie, gravy, baking > 10
11 Questions? 11
12 Children of the body element As you will recall, the body element contains the content of the web page that will be presented to the user. Within the body element, you will fnd elements related but not limited to Text Links Lists Images There are two types of elements in the body of a web page. Block: elements that exist on their own line within the web page. Inline: elements that do not require their own line 12
13 The heading elements The heading elements are regular block elements that are used to defne the headings on a web page. There are 6 levels of headings, they are h1, h2, h3, h4, h5 and h6. There should always be one h1 on a web page that holds the most important heading on that page. Although heading elements are not nested, the content of a web page should be laid out in a hierarchical fashion with each successive subheading being of the next level. Do not use heading elements to set text size. 13
14 Example heading elements and hierarchy Code In Browser <h1>types of Pets<h1> <h2>dogs</h2> <h3>breeds of Dogs</h3> <h2>cats</h2> <h3>breeds of Cats</h3> 14
15 The pre element The pre element is a regular block element that is used to display a preformatted block of text. Text within a pre element is displayed as it is written in the html fle. This means all whitespace is preserved. This is typically used to display a block of code 15
16 Example pre element Code <pre> h1 { color: blue } </pre> In Browser 16
17 The address element The address element is a regular block element that is used for contact information. If the address element is inside of a body element, this is the contact information for the web page s developer/owner. If the address element is inside of an article element, this is the contact information for the article s author. The address element is not to be used for arbitrary postal addresses on a web page. 17
18 Example address element Code <address> <br> </address> In Browser 18
19 The <p> element The <p> element is a regular block element that is used to specify a paragraph of text. Code <p>this is a very short paragraph of text. It s only two sentences.</p> In Browser 19
20 The sup element The sup element is a regular inline element that is used to specify text as a superscript. Code September 4<sup>th</sup>, In Browser 20
21 The sub element The sub element is a regular inline element that is used to specify text as a subscript. Code H<sub>2</sub>O In Browser 21
22 The br element The br element is a empty inline element that is used to start a new line of text. Code This is a long line of<br> text that takes up<br> several lines. In Browser 22
23 The abbr element The abbr element is a regular inline element that is used to specify text as an abbreviation. Attribute title: can be used to specify what abbreviation stands for Code <abbr title= Captain >Capt.</abbr> Kirk In Browser 23
24 The cite element The cite element is a regular inline element that is used to specify the title of a work. Code My favorite classical work is <cite>mars, The Bringer of War</cite> by Gustav Holst. In Browser 24
25 The code element The code element is a regular inline element that is used to specify a segment of code. Code To defne a name variable, enter <code>var name = "Adam"</code>. In Browser 25
26 The dfn element The dfn element is a regular inline element that is used to specify a special term that is defned within the nearest parent element of the dfn element. If the title attribute is used, it must only contain the term being defned. Code <p><dfn>nasa</dfn> is the USA s national space agency</p> In Browser 26
27 The em element The em element is a regular inline element that is used to specify that the text has emphasis. Code <em>emphasized text</em> In Browser 27
28 The kbd element The kbd element is a regular inline element that is used to specify keyboard input. Code To confrm, enter <kbd>yes </kbd> in the text box. In Browser 28
29 The <q> element The <q> element is a regular inline element that is used to specify a quotation. The browser will wrap the quotation in quotes. Code <q>an investment in knowledge pays the best interest</q> - Benjamin Franklin In Browser 29
30 The samp element The samp element is a regular inline element that is used to specify sample output from a computer program. Code When you open the terminal you will see output like <samp> adam@adams-laptop:~$</samp> In Browser 30
31 The small element The small element is a regular inline element that is used to specify a side comment, like a disclaimer. Code Buy this car for $15,000 <small> tax and fees not included</small> In Browser 31
32 The strong element The small element is a regular inline element that is used to specify that the text is strongly emphasized. Code <strong>strongly Emphasized Text</strong> In Browser 32
33 The var element The var element is a regular inline element that is used to specify a computer variable. Code In order to show the date, set the <var>date</var> variable to true. In Browser 33
34 Questions? 34
35 HTML character entities Special characters and characters like < and > are entered into HTML by using character entities. A character entity starts with an & and ends with a ;. Since multiple spaces in HTML is only shown as one space in text, you can use the character entity if you want to display multiple spaces. 35
36 Example character entities & - & < - < > - > - π - π The complete list of character entities can be found at 36
37 Core HTML attributes In addition to the attributes mentioned in the previous HTML elements, there is a set core or global attributes that can be used on most elements. The four most commonly used core attributes: id: a unique identifier for the html element class: one or more classes, separated by spaces, that can be used by CSS. This attribute does not have to be unique. title: additional information about the element. This is shown as a tooltip in browsers for some elements. lang: the language of the content within the element this attribute is assigned to 37
38 Questions? 38
39 HTML5 semantic elements HTML5 introduced semantic elements to structure web pages. The idea behind using semantic elements is to give meaning to the HTML elements. Before the semantic elements for structure, developers would have to use generic div and span elements. Semantic elements will help search engines better understand web pages to give better results. 39
40 HTML5 semantic elements The main HTML5 semantic elements: Header Main Section Article Nav Aside Footer 40
41 The header element The header element is a regular block element that is used to specify a header for a web page or article element. Code <header> <h1>my Awesome Website</h1> </header> 41
42 The main element The main element is a regular block element that is used to specify the main content of a web page. This content should be unique on each web page. Code <main> <p>welcome to my awesome website.</p> </main> 42
43 The section element The section element is a regular block element that is used to specify a generic section of a web page. The section element does not specify a specifc type of content and can be used when there is not a more appropriate element. Code <section> <!-- some logical grouping of elements --> </section> 43
44 The article element The section element is a regular block element that is used to specify an article like a blog post. Code <article> <h1>welcome</h1> <p>welcome to my blog. In this blog, I will cover...</p> </article> 44
45 The nav element The nav element is a regular block element that is used to specify a navigation menu. Code <nav> <a>menu Item 1</a> <a>menu Item 2</a> <a>menu Item 3</a> </nav> 45
46 The aside element The aside element is a regular block element that is used to specify content that is related to the content near it. The aside element can be used to create a sidebar Code <main> <!-- some main content --> </main> <aside> <!-- content related to the content in main --> </aside> 46
47 The footer element The footer element is a regular block element that is used to specify a footer for a web page or article element. Code <footer> <p> 2018</p> </footer> 47
48 Other supported HTML5 semantic elements There are other HTML5 semantic elements but they are not all supported by browsers yet. Three useful elements that currently are Time Figure Figcaption 48
49 The time element The time element is a regular inline element that is used to specify a date or date and time in a format that the browser can parse. Attributes Datetime: date and time in a standard format Pubdate: publication date for the article that contains the time element Code <time datetime= >September 4th</time> 49
50 The fgure and fgcaption elements The fgure element is a regular block element that is used to specify a fgure like an image, illustration or code sample. The fgcaption element is a regular block element that give a caption to the fgure. 50
51 Example of fgure and fgcaption Code <fgure> <code> $date = ;<br> echo $date; </code> <fgcaption> PHP for printing a variable </fgcaption> </fgure> In Browser 51
52 Div and span elements Div and span elements are used for generic block and inline elements respectively. These were commonly used before HTML5 to lay out the HTML for a web page. You can still use the div element for generic block elements if there is not an applicable HTML5 semantic element. You can still use the span element for generic inline elements if there is not an applicable HTML5 semantic element. 52
53 Example page layout with divs <div id= header> <!-- header content --> </div> <div id= main > <!-- main content --> </div> <div id= footer > <!-- footer content --> </div> 53
54 The same page using semantic elements <header> <!-- header content --> </header> <main> <!-- main content --> </main> <footer> <!-- footer content --> </footer> 54
Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar
Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as
More informationHTML CS 4640 Programming Languages for Web Applications
HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More informationCOPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1
59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The
More informationCOMP1223 Web Development Fundamentals
WEEK 2 COMP1223 Web Development Fundamentals Book: Murach's HTML5 and CSS3 Week: 2 Chapters: 2 and 3 Author/s: Maziar Masoudi L E C T U R E N O T E 2014 External Sources: http://www.murach.com/books/htm5/index.htm
More informationINTRODUCTION TO HTML5! HTML5 Page Structure!
INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since
More informationCOMP519 Web Programming Lecture 3: HTML (HTLM5 Elements: Part 1) Handouts
COMP519 Web Programming Lecture 3: HTML (HTLM5 Elements: Part 1) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of
More informationCertified HTML Designer VS-1027
VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are
More informationMarkup Language. Made up of elements Elements create a document tree
Patrick Behr Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how
More informationHTML5 & CSS 8 th Edition. Chapter 2 Building a Webpage Template with HTML5
HTML5 & CSS 8 th Edition Chapter 2 Building a Webpage Template with HTML5 Objectives 1. Explain how to manage website files 2. Describe and use HTML5 semantic elements 3. Determine the elements to use
More informationTutorial 2 - HTML basics
Tutorial 2 - HTML basics Developing a Web Site The first phase in creating a new web site is planning. This involves determining the site s navigation structure, content, and page layout. It is only after
More informationQUICK REFERENCE GUIDE
QUICK REFERENCE GUIDE New Selectors New Properties Animations 2D/3D Transformations Rounded Corners Shadow Effects Downloadable Fonts @ purgeru.deviantart.com WHAT IS HTML5? HTML5 is being developed as
More informationTutorial 1 Getting Started with HTML5. HTML, CSS, and Dynamic HTML 5 TH EDITION
Tutorial 1 Getting Started with HTML5 HTML, CSS, and Dynamic HTML 5 TH EDITION Objectives Explore the history of the Internet, the Web, and HTML Compare the different versions of HTML Study the syntax
More informationMore about HTML. Digging in a little deeper
More about HTML Digging in a little deeper Structural v. Semantic Markup Structural markup is using to encode information about the structure of a document. Examples: , , , and
More informationUsing CSS for page layout
Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility
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: Inline & HTML5 Elements, and More
HTML: Inline & HTML5 Elements, and More CISC 282 September 20, 2017 Semantic HTML HTML is used to define content Choose tags according to content, not style What category (defined with tags) suits your
More informationHTML Hyper Text Markup Language
HTML Hyper Text Markup Language Home About Services index.html about.html services.html Homepage = index.html site root index.html about.html services.html images headshot.jpg charlie.jpg A webpage built
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 informationBeginning Web Programming with HTML, XHTML, and CSS. Second Edition. Jon Duckett
Beginning Web Programming with HTML, XHTML, and CSS Second Edition Jon Duckett Beginning Web Programming with HTML, XHTML, and CSS Introduction............................................... xxiii Chapter
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 informationGRAPHIC WEB DESIGNER PROGRAM
NH128 HTML Level 1 24 Total Hours COURSE TITLE: HTML Level 1 COURSE OVERVIEW: This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used
More informationProgrammazione Web a.a. 2017/2018 HTML5
Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text
More informationInline Elements Karl Kasischke WCC INP 150 Winter
Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 1 Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts
More informationHTML Organizing Page Content
HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe
More informationWebsite Development with HTML5, CSS and Bootstrap
Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on
More informationCascading Style Sheet
Extra notes - Markup Languages Dr Nick Hayward CSS - Basics A brief introduction to the basics of CSS. Contents Intro CSS syntax rulesets comments display Display and elements inline block-level CSS selectors
More information<page> 1 Document Summary Document Information <page> 2 Document Structure Text Formatting <page> 3 Links Images <page> 4
Document Summary Document Information Document Structure Text Formatting Links Images Lists Forms Input Type Attributes Select Attributes Option Attributes Table Formatting Objects and iframes iframe Attributes
More informationLearning Objectives. Review html Learn to write a basic webpage in html Understand what the basic building blocks of html are
HTML CSCI311 Learning Objectives Review html Learn to write a basic webpage in html Understand what the basic building blocks of html are HTML: Hypertext Markup Language HTML5 is new standard that replaces
More informationHTML+ CSS PRINCIPLES. Getting started with web design the right way
HTML+ CSS PRINCIPLES Getting started with web design the right way HTML : a brief history ❶ 1960s : ARPANET is developed... It is the first packet-switching network using TCP/IP protocol and is a precursor
More informationHyper Text Markup Language
Hyper Text Markup Language HTML is a markup language. It tells your browser how to structure the webpage. HTML consists of a series of elements, which you use to enclose, or mark up different parts of
More informationCOPYRIGHTED MATERIAL. Contents. Introduction. Chapter 1: Structuring Documents for the Web 1
Introduction Chapter 1: Structuring Documents for the Web 1 A Web of Structured Documents 1 Introducing HTML and XHTML 2 Tags and Elements 4 Separating Heads from Bodies 5 Attributes Tell Us About Elements
More informationProgramming of web-based systems Introduction to HTML5
Programming of web-based systems Introduction to HTML5 Agenda 1. HTML5 as XML 2. Basic body elements 3. Text formatting and blocks 4. Tables 5. File paths 6. Head elements 7. Layout elements 8. Entities
More informationSymbols INDEX. !important rule, rule, , 146, , rule,
Symbols!important rule, 209 @import rule, 140-144, 146, 155-156, 157 @media rule, 155-156 A element. See anchors abbr attribute, 36-37 element, 87, 90-91 absolute positioning, 177, 178, 182,
More informationStatic Webpage Development
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction
More informationChapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.
Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT. Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser What is XHTML?
More informationHTML Cheat Sheet for Beginners
HTML Cheat Sheet for Beginners HTML Cheat Sheet for Beginners Trying to remember every HTML element is like trying to remember all of your personal information, credit card, bank account numbers and your
More informationCSC Web Programming. Introduction to HTML
CSC 242 - Web Programming Introduction to HTML Semantic Markup The purpose of HTML is to add meaning and structure to the content HTML is not intended for presentation, that is the job of CSS When marking
More informationFEWD START SCREENCAST!!!!
FEWD START SCREENCAST!!!! LET'S GET EVERYTHING SET UP! 1. Navigate to the FEWD 51 Dashboard (saraheholden.com/fewd51) and download the Lesson 5 starter code and slides. You'll want to keep the dashboard
More informationHyper Text Markup Language
Hyper Text Markup Language HTML is a markup language. It tells your browser how to structure the webpage. HTML consists of a series of elements, which you use to enclose, or mark up different parts of
More informationHTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS
MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version
More informationWeb Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
Web Site Design and Development Lecture 9 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Floating elements on a web page By default block elements fll the page from top to bottom and inline elements fll
More informationMODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )
MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,
More informationWeb development using PHP & MySQL with HTML5, CSS, JavaScript
Web development using PHP & MySQL with HTML5, CSS, JavaScript Static Webpage Development Introduction to web Browser Website Webpage Content of webpage Static vs dynamic webpage Technologies to create
More informationCHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)
CHAPTER 1: GETTING STARTED WITH HTML EXPLORING THE HISTORY OF THE WORLD WIDE WEB Network: a structure that allows devices known as nodes or hosts to be linked together to share information and services.
More informationInternet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:
Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz Essential HTML components Element element example Start tag Element content End 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 informationBasics of Web Design, 3 rd Edition Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What element is used to configure a new paragraph? a. new b. paragraph c. p d. div 2. What element is used to create the largest heading? a. h1 b. h9 c. head
More informationWeb Designing HTML5 NOTES
Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages
More informationWeb Programming and Design. MPT Senior Cycle Tutor: Tamara Week 1
Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 1 What will we cover? HTML - Website Structure and Layout CSS - Website Style JavaScript - Makes our Website Dynamic and Interactive Plan
More informationBASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS
BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements including headings, paragraphs, lists,
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 information16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What
More informationThe [HTML] Element p. 61 The [HEAD] Element p. 62 The [TITLE] Element p. 63 The [BODY] Element p. 66 HTML Elements p. 66 Core Attributes p.
Acknowledgments p. xix Preface p. xxi Web Basics Introduction to HTML p. 3 Basic HTML Concepts p. 4 HTML: A Structured Language p. 7 Overview of HTML Markup p. 11 Logical and Physical HTML p. 13 What HTML
More informationThe three common HTML terms you should begin with are elements, tags, and attributes.
Revision What Are HTML & CSS? HTML, HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets,
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 informationHTML. Based mostly on
HTML Based mostly on www.w3schools.com What is HTML? The standard markup language for creating Web pages HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup
More informationSpring School Advanced XML/TEI technologies Centre for Information Modelling, Graz University April <HTML5> An introduction
Spring School Advanced XML/TEI technologies Centre for Information Modelling, Graz University April 13-17 2015 An introduction Frederike Neuber Centre for Information Modelling DiXiT Network frederike.neuber@uni-graz.at
More informationDownloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -
Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will
More informationIntroduction to HTML5
Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.
More informationCIS 228 (Fall, 2012) Exam 2, 11/20/12
CIS 228 (Fall, 2012) Exam 2, 11/20/12 Name (sign) Name (print) email Question 1 2 3 4 5 6 7 8 9 10 TOTAL Score CIS 228, exam 2 1 11/20/12 True or false: Question 1 Unordered lists can contain ordered sub-lists.
More informationWireframe :: tistory wireframe tistory.
Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' 7 1 2009/09/20 [ ] XHTML CSS - 6 (2) 2 2009/07/23 [ ] XHTML CSS - 5 (6) 3 2009/07/17
More informationUnderstanding this structure is pretty straightforward, but nonetheless crucial to working with HTML, CSS, and JavaScript.
Extra notes - Markup Languages Dr Nick Hayward HTML - DOM Intro A brief introduction to HTML's document object model, or DOM. Contents Intro What is DOM? Some useful elements DOM basics - an example References
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 Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank
Multiple Choice. Choose the best answer. 1. What tag pair is used to create a new paragraph? a. b. c. d. 2. What tag pair
More informationCascading Style Sheets for layout II CS7026
Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want
More informationCompuScholar, Inc. Alignment to Utah's Web Development I Standards
Course Title: KidCoder: Web Design Course ISBN: 978-0-9887070-3-0 Course Year: 2015 CompuScholar, Inc. Alignment to Utah's Web Development I Standards Note: Citation(s) listed may represent a subset of
More informationMPT Web Design. Week 1: Introduction to HTML and Web Design
MPT Web Design Week 1: Introduction to HTML and Web Design What will we do in this class? Learn the basics of HTML and how to create our own template Basic website structure Learn design concepts for a
More informationBlock & Inline Elements
Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not
More information5-Sep-16 Copyright 2016 by GemTalk Systems LLC 1
So far we have identified the specific Seaside messages to create particular HTML constructs in an adhoc manner as needed for particular features. Now we will attempt a more systematic approach by looking
More informationWeb Design and Application Development
Yarmouk University Providing Fundamental ICT Skills for Syrian Refugees (PFISR) Web Design and Application Development Dr. Abdel-Karim Al-Tamimi altamimi@yu.edu.jo Lecture 02 A. Al-Tamimi 1 Lecture Overview
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 informationIEEE Wordpress Theme Documentation
IEEE Wordpress Theme Documentation Version 1.0.2 2014-05- 16 Table of Contents TABLE OF CONTENTS 2 INITIAL SETUP 3 FRONT PAGE 3 POSTS PAGE 4 CONTACT 5 SITE MAP 6 MENU 7 HOME PAGE 8 PAGE TEMPLATES 10 LEFT
More informationCPET 499/ITC 250 Web Systems. Topics
CPET 499/ITC 250 Web Systems Lecture on HTML and XHTML, Web Browsers, and Web Servers References: * Fundamentals of Web Development, 2015 ed., by Randy Connolly and Richard Hoar, from Pearson *Chapter
More informationUNIT II Dynamic HTML and web designing
UNIT II Dynamic HTML and web designing HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language
More informationCSS for Page Layout Robert K. Moniot 1
CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements
More informationData Visualization (CIS/DSC 468)
Data Visualization (CIS/DSC 468) Web Programming Dr. David Koop Definition of Visualization Computer-based visualization systems provide visual representations of datasets designed to help people carry
More informationFull file at New Perspectives on HTML and CSS 6 th Edition Instructor s Manual 1 of 13. HTML and CSS
New Perspectives on HTML and CSS 6 th Edition Instructor s Manual 1 of 13 HTML and CSS Tutorial One: Getting Started with HTML 5 A Guide to this Instructor s Manual: We have designed this Instructor s
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationAdobe Experience Manager (AEM) Author Training
Adobe Experience Manager (AEM) Author Training McGladrey.com 11/6/2014 Foster, Ken Table of Contents AEM Training Agenda... 3 Overview... 4 Author and Publish Instances for AEM... 4 QA and Production Websites...
More informationDesigning UI. Mine mine-cetinkaya-rundel
Designing UI Mine Çetinkaya-Rundel @minebocek mine-cetinkaya-rundel mine@stat.duke.edu - Web application UI is ultimately HTML/CSS/JavaScript - Let R users write user interfaces using a simple, familiar-looking
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 informationCOMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts
COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University
More informationHTML Markup for Accessibility You Never Knew About
HTML Markup for Accessibility You Never Knew About David Epler dcepler@dcepler.net June 27, 2004 HTML Revisions HTML 2.0 November 1995 Base version everyone learned HTML 3.2 January 1997 Tried to reconcile
More informationIntroduction to HTML
Introduction to HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements
More informationIndex. CSS directive, # (octothorpe), intrapage links, 26
Holzschlag_.qxd 3/30/05 9:23 AM Page 299 Symbols @import CSS directive, 114-115 # (octothorpe), intrapage links, 26 A a element, 23, 163, 228 abbr element, 228 absolute keywords for font sizing, 144 absolute
More informationHTML Organizing Page Content
HTML Organizing Page Content HTML 5 Elements Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier) May be used to divide pages into major sections
More informationElectronic Books. Lecture 6 Ing. Miloslav Nič Ph.D. letní semestr BI-XML Miloslav Nič, 2011
Electronic Books Lecture 6 Ing. Miloslav Nič Ph.D. letní semestr 2010-2011 BI-XML Miloslav Nič, 2011 Evropský sociální fond Praha & EU: Investujeme do vaší budoucnosti E-book Wikipedia: An electronic book
More informationUFCEKG Lecture 2. Mashups N. H. N. D. de Silva (Slides adapted from Prakash Chatterjee, UWE)
UFCEKG 20 2 Data, Schemas & Applications Lecture 2 Introduction to thewww WWW, URLs, HTTP, Services and Mashups N. H. N. D. de Silva (Slides adapted from Prakash Chatterjee, UWE) Suppose all the information
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 informationWeb Site Design and Development. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
Web Site Design and Development CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM By the end of this course you will be able to Design a static website from scratch Use HTML5 and CSS3 to build the site you
More informationAnatomy of an HTML document
Anatomy of an HTML document hello World hello World This is the DOCTYPE declaration.
More informationCreating HTML files using Notepad
Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the
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 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 informationHTML. HTML is now very well standardized, but sites are still not getting it right. HTML tags adaptation
1 HTML HTML is now very well standardized, but sites are still not getting it right HTML tags adaptation HTML 2 HTML = HyperText Markup Language is used for the structural part of web pages Our strategy
More informationMarkup Language SGML: Standard Generalized Markup Language. HyperText Markup Language (HTML) extensible Markup Language (XML) TeX LaTeX
HTML 1 Markup Languages A Markup Language is a computer language in which data and instructions describing the structure and formatting of the data are embedded in the same file. The term derives from
More informationWEB DESIGNING COURSE SYLLABUS
F.A. Computer Point #111 First Floor, Mujaddadi Estate/Prince Hotel Building, Opp: Okaz Complex, Mehdipatnam, Hyderabad, INDIA. Ph: +91 801 920 3411, +91 92900 93944 040 6662 6601 Website: www.facomputerpoint.com,
More informationCS144 Notes: Web Standards
CS144 Notes: Web Standards Basic interaction Example: http://www.youtube.com - Q: what is going on behind the scene? * Q: What entities are involved in this interaction? * Q: What is the role of each entity?
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 information