To display an HTML page correctly, a web browser must know which character set to use. From ASCII to UTF-8 ASCII was the first character encoding standard. ASCII defined 128 different characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + – ( )… Read More »
Emojis are characters from the UTF-8 character set: 😄 😍 💗 What are Emojis? Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set. The HTML charset Attribute To display an HTML page correctly, a web browser must know the character set used in the… Read More »
Symbols that are not present on your keyboard can also be added by using entities. HTML Symbol Entities HTML entities were described in the previous chapter. Many mathematical, technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use the entity name or the… Read More »
Reserved characters in HTML must be replaced with character entities. HTML Entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. A character entity looks like… Read More »
Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> – Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content. Semantic Elements in HTML Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div… Read More »
Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes and viewports. What is Responsive Web Design? Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good… Read More »
Websites often display content in multiple columns (like a magazine or a newspaper). HTML Layout Elements HTML has several semantic elements that define the different parts of a web page: HTML Layout Techniques There are four different techniques to create multicolumn layouts. Each technique has its pros and cons: CSS framework CSS float property CSS… Read More »
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>. The HTML <head> Element The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta… Read More »
A file path describes the location of a file in a web site’s folder structure. File Path Examples Path Description <img src=”picture.jpg”> The “picture.jpg” file is located in the same folder as the current page <img src=”images/picture.jpg”> The “picture.jpg” file is located in the images folder in the current folder <img src=”/images/picture.jpg”> The “picture.jpg” file… Read More »
JavaScript makes HTML pages more dynamic and interactive. Example <!DOCTYPE html> <html> <body> <h1>My First JavaScript</h1> <button type=”button” onclick=”document.getElementById(‘demo’).innerHTML = Date()”>Click me to display Date and Time.</button> <p id=”demo”></p> </body> </html> The HTML <script> Tag The HTML <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an… Read More »