A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text, meaning when the document is processed for display, the markup language is not shown, and is only used to format the text. The language consists of tags used to identify elements that define how different parts of the page should be displayed.
The text inside the tags is <b>bold</b> the rest is notHyperText Markup Language is an example of a markup language. It is abbreviated as HTML.
HTML can be used to:
- set where text should be placed
- describe the structure of the text, e.g. headings, paragraphs
- create hyperlinks
- embed images
- create sections within the page
HTML tags are not case sensitive: <P> means the same as <p>. The tags themselves are not shown on the screen.
The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML. Think coding standards.
Web browsers
A web browser is an application used to view HTML resources. These resources can be web pages on the internet or locally saved files.
The browser handles all the navigation code required to request resources from web servers and display the result.
Common browsers include Mozilla Firefox, Microsoft Edge, Google Chrome and Apple’s Safari.
Not all browsers render content the same way.
Outdated browsers may be unable to show modern content at all.
Links
To navigate between pages in websites you use hyperlinks. A hyperlink is a clickable link to another internet resource.
The link can be on a text or graphical piece of content.
The resource can be on the same web server or send the user to a different web site.
You might have encountered the term URL. This stands for Uniform Resource Locator and represents the address of a resource on the internet. A URL consists of both a protocol and a resource name. These are separated by a colon and two forward slashes.
The protocol might be something like HTTP, FTP or HTTPS.
The resource name could be a domain name or an IP address along with any page identifier.
The URL is simply a way to instruct a browser or other application in where to find a given resource online.
Examples of URLs:
- https://www.w3c.org
- ftp://192.168.1.1/files/resource1
Development tools
Text Editor or Code Editor: All you need to develop a website is a text editor such as Notepad. There are a range of products available from WYSIWYG editors such as Dreamweaver to software development IDEs that will autocomplete tags and highlight errors in the code.
Graphics Package: Access to a graphics manipulation package to edit images is also going to be useful. This is in case you need to resize or crop images, and for saving at a lower quality for performance purposes.
Validation Tools: Once your website is nearing completion it is worth validating the code to see if there are any issues highlighted.
Code editor
Code editors are software applications that allow you to directly edit the HTML, CSS and Javascript code in text form.
They can range from a simple text editor like Notepad to a complex IDE like Visual Studio that will highlight broken tags and change the colour of the text depending on the type of code.
Web authoring software
Also called a WYSIWYG editor. Stands for What You See Is What You Get. Pronounced Wizzy-Wig.
A WYSIWYG Editor is one similar to a word processor like Microsoft Word. What you see on the editor screen is an accurate representation of what will appear on the webpage. It allows for websites to be visually created rather than using code tags, with the application generating the code.
There will be buttons for some of the more common features such as allowing you to alter the font weight or size, insert images or links.
Many WYSIWYG editors allow you to switch between a visual WYSIWYG mode and a text based mode that lets you see the pure HTML code used to create the page.
Web Authoring Software is often more expensive than a code editor.
Validators and checkers
During development it is worth periodically checking to confirm that the code is considered valid. Code that complies with the W3C’s standards is more likely to behave in a uniform fashion across different browsers.
Invalid code might look correct in your browser but fails to render certain elements on a different browser or version.
You can submit your code to validation sites that will check that there are no missing tags or attributes and that the tags you have used are correct.
There are websites available to check both the HTML and CSS such as:
Browser tools
Almost all web browsers now come with development tools built in.
These are very useful for:
- debugging errors on the page
- testing style changes
- inspecting other websites
- testing performance
Just look through the Tools menu to see what your browser offers with regards to development tools.
