OCR Computing OGAT 1.3.3 Web Technologies. What OCR need you to know… You are expected to have a working knowledge of the above web languages.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
Understand Web Page Development Software Development Fundamentals LESSON 4.1.
Basic HTML. HTML Background November 1990, first created by Tim Berners Lee, the father/inventor of WWW Knighted by Queen Victoria in 2004 Hypertext is.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
4.01 Cascading Style Sheets
4.01B Authoring Languages and Web Authoring Software 4.01 Examine webpage development and design.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Inline, Internal, and External FIle
Chapter 14 Introduction to HTML
1 Introduction to HTML. 2  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language  of Web Pages on the World Wide Web. HTML is a.
 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.
Web Design Basic Concepts.
Web Page Introduction. What is a web page? A web page is a text file containing markup language tags. –A markup language combines text and extra information.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Multimedia and Web Technology Prepared by: Asst. Prof. Maryam Eskandari.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
1 CS 3870/CS 5870 Static and Dynamic Web Pages ASP.NET and IIS.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.
Webpage design for researchers Dr Jim Briggs 1.
NetTech Solutions Working with Web Elements Lesson 6.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Sheet 1XML Technology in E-Commerce 2001Lecture 1 XML Technology in E-Commerce Lecture 1 WWW, HTML, CSS, XML, Meta-modeling.
HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.
HTML. Principle of Programming  Interface with PC 2 English Japanese Chinese Machine Code Compiler / Interpreter C++ Perl Assembler Machine Code.
Introduction to HTML Tutorial 1 eXtensible Markup Language (XML)
Cascading Style Sheets Part 1. CSS vs HTML HTML: Originally intended to markup structure of a document (,...,,,,,...) CSS Developing technology, CSS1,
Introduction To HTML.  HTML stands for Hyper Text Markup Language.  HTML was developed by Tim Berners-Lee.  HTML is maintained by World Wide Web Consortium(W3C).
U NDERSTAND THE W EB AND D IGITAL C OMMUNICATIONS P ATHWAY 4.02 U NDERSTAND HOW W EBPAGES ARE CREATED AND USED.
Web Design and Development. World Wide Web  World Wide Web (WWW or W3), collection of globally distributed text and multimedia documents and files 
Cascading Style Sheets
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Chapter 1 Introduction to HTML, XHTML, and CSS HTML5 & CSS 7 th Edition.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Web Basics: HTML/CSS/JavaScript What are they?
Project 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Chapter 1 Introduction to HTML.
Project 1 Introduction to HTML.
Unit 2, Lesson 5 Website Development Tools
Objective % Select and utilize tools to design and develop websites.
Unit 2, Lesson 5 Website Development Tools
The Web Wizard’s Guide To DHTML and CSS
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Training & Development
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Computer communications
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

OCR Computing OGAT Web Technologies

What OCR need you to know… You are expected to have a working knowledge of the above web languages

Tasks 1.Sum up the following decades in the life of the internet: 1960s | 1970s | 1980s | 1990s 2.How do the world wide web and the internet differ? 3.What role did Sir Tim Berners-Lee play in the development of the internet and/or www? Internet vs World Wide Web Sir Tim Berners-Lee

HTML – Hypertext Mark-up Language Tasks (Pages 202 and 222) 1.What is HTML? 2.What role does the browser play in the hypertext mark-up language? 3.What is an HTML tag? 4.What common development platforms are designed to work inside HTML documents?

HTML that you must know…. to link to a CSS file including the src, alt, height and width attributes. including the href attribute. where the input is a textbox (i.e. has the attribute type=”text” and another attribute name to identify it) or a submit button (i.e. has the attribute type=”submit”) REFERENCE SLIDE ONLY

CSS Tasks 1.What are cascading style sheets? 2.What are the advantages of separating the formatting from the content? 3.What is the difference between the following ways to deploy CSS? –External Style Sheet | Internal Style Sheet | Inline Styles 4.What is meant by the cascading order when talking about CSS? 5.Have a quick play around with to see CSS in action

CSS that you must know…. In the style sheets they should be able to use CSS to define the styling of elements: h1{ color:blue; } classes.infoBox{ background-color: green; } and Identifiers #menu{ background-color: #A2441B } They are expected to be familiar with the following properties. background-color border-color border-style border-width color with named and hex colours font-family font-size height width REFERENCE SLIDE ONLY

Hex - HTML / CSS Colours (Colors) Tasks 1.Convert each of the following Hex codes into its 3 part denary numbers: a)#FF1493 | # | # | #FFFFFF 2.Now open MS Paint and click on ‘Edit Colours’ type in the first number in the Red box, second in the Green and third in the Blue. What colour is made by each hex code? 3.What is the hex code for the following: (95,137,129) Modern browsers support 140 colour names but if the colour name is not recognised by the browser you can specify the colour using a Hex code. Every colour can be made by combining different amounts of red, green and blue. These are called RGB colours.

Web Authoring Tools Tasks 1.What is a WYSIWYG? 2.What are the benefits of a web authoring tool? 3.What are negatives of a web authoring tool? 4.Why do developers often prefer a simple text editor such as notepad or notepad++? Writing HTML code is often most easily done by using a web authoring tool such as Dreamweaver®

JavaScript Tasks 1.When combined with HTML and CSS what role does JavaScript play? 2.JavaScript is a scripting language, how does this differ from a normal programming language? 3.What is meant by ‘client-side scripting’ and why is it efficient? 4.JavaScript uses ‘Dynamic typing’ what is it? 5.What are some of the main uses of JavaScript? 6.Explain the advantage of using an interpreted rather than a compiled language to add functionality to a webpage.

Search Engines Tasks 1.How do search engines use indexes? 2.In terms of search engines what are robots/spiders? 3.What are meta tags and how are they used by developers? 4.How do search engines utilise meta tags? 5.What is the page rank algorithm and briefly how does it work? Search Engine leaders and their market share Jan-Oct 2015

Client and Server-side Processing Tasks 1.Why does client-side processing reduce the load on the server? 2.How does client-side scripting reduce web traffic? 3.Why is sever-side processing vital for querying a database? 4.What types of languages can be processed on the client-side? 5.What types of languages can be processed on the server-side?

Data Compression - Lossy Tasks 1.For what type of files is lossy compression mostly used? 2.What are the disadvantages of over compressing images? 3.What is typically taken out of sound files in lossy compression? 4.What are common file formats for lossy compression? 5.What are the common reduction ratios for video, audio and photographs? Uncompressed Image Size 1MB (1024K B) Compressed Image Size 4.4KB VSVS 99.5% Reduction

Data Compression - Lossless Tasks 1.How is lossless different from lossy compression? 2.What is the LZW algorithm? Where is it used? 3.What are some common file formats that use dictionary coding? 4.How has the image been compressed in example 2? Example 1 Example 2