Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML's - Coggle Diagram
HTML's
HTML history
Who invented WWW?
Tim Berner
What year did this happen?
1989
What does WWW stand for?
World Wide Web
Who is the WC3? What do they do?
The W3C (World Wide Web Consortium) is an international organization that creates standards for the World Wide Web.
The WC3 is committed to improving the web by setting and promoting web-based standards. The W3C's goal is to create technical standards and guidelines for web technologies worldwide.
URL
Uniform Resource Locator
is a unique address for every webpage
FTP
File transfer protocol
is a standard network protocol used to transfer computer files from one host to another host over a TCP-based network, such as the Internet
TCP/IP
Transmission Control Protocol/Internet Protocol
is a set of communications protocols used for the exchange of information over networks and over the internet.
HTTPS
Hypertext Transfer Protocol Secure
defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.
Maintain interactive content
Outdated links
User’s experience on your website by preventing them from getting the required information which could mean that they move on to another site.
Unreliable website – lose the trust of potential customers as they may not feel that they can trust a website that doesn’t work with any of their information eg credit card details
Lower your rankings in a search engine results page as visitors could leave website as it’s not working as it should, could lead to less visitors, business, exposure, etc.
Copyright
Importance of copyright when creating websites, especially new content
Process for getting copyright clearance:
Identify the owner
Get permission from owner
Identify rights needed
Contact the owner and negotiate if payment is required
Get permission agreement in writing
Metadata
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.
In a HTML document, the <meta> tag is used and always go inside the <head> element.
task
For your each of the pages in your 4 Fruits Website and in the <head> tag section:
Type in the following metatags for these pages
For the Index page keywords: 4fruits, about
For the apples page keywords: 4fruits, apples
For the oranges page keywords: 4fruits, oranges
For the pears page keywords: 4fruits, pears
For the lemons page keywords: 4fruits, lemons
tags
Tags are the hidden keywords within a web page that define how your web browser must format and display the content.
Most tags must have two parts, an opening and a closing part.
Alt tags
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Safe work practices
Avoid long periods of time working on computers which increase the likelihood of muscular aches, pains and fatigue caused by repetitive movement and sustained visual attention.
Taking regular movement breaks (eg. every 20 mins)
Structure tasks so that you can vary work tasks and postures
Ensure that workstation is set up ergonomically
what is HTML
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
describes the structure of a Web page
consists of a series of elements
elements tell the browser how to display the content
What is a HTML Element
A HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
CSS(CASCADING STYLE SHEETS)
Style Sheets allow you to ensure that text is consistently formatted in all pages throughout a site.
Cascading means to flow, so a CSS style can flow from one set of text to another in any page.
A major advantage of styles is that you can ensure that text looks the same on all browsers, platforms and pages.
INLINE, Internal and External CSS
Inline style: apply a unique style to a single HTML element. An inline CSS uses the <style> attribute of an HTML element.
Internal Custom Styles: which apply only to the page that they were created on. An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
External Custom Styles: which can apply to all linked pages in a site. To use an external style sheet, add a link to it in the <head> section of each HTML page.
Cascading
Multiple Styles Will Cascade into One
The word cascading means that a style applied to a parent element will also apply to all children elements within the parent.
So, if you set the colour of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same colour (unless you specify something else)!
Simple html Document
Text editor
Browser
Example Explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
Attributes
HTML attributes provide additional information about HTML elements.
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document
Resources
w3schools
Australian Copyright Council