IMC90 Hacking your website with HTML & CSS
What is HTML
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Wikipedia
Core of what we know today was invented by Tim Berners-Lee. First website
Timeline of HTML: htmlwasher.com
Example HTML code
HTML Code
<html>
<head>
<title>This is a web page</title>
<meta name="description" content="Outline for HTML webinar">
</head>
<body>
<img src="/wp-content/uploads/2022/12/Icon-wireframe-1011x1024.png" width="100" height="100" alt="Wireframe icon"/>
<h1>This is a web page</h1>
<h2>This is my sub title</h2>
<p><strong>First paragraph</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui erat, iaculis et aliquam a, pulvinar quis libero. Ut vehicula felis vitae tortor porttitor interdum.</p>
<p><strong>Second paragraph</strong> - Nam sed justo metus, tempor imperdiet quam. Pellentesque id suscipit sapien. Donec mollis velit sit amet est bibendum id fringilla dolor volutpat. Nullam tincidunt commodo dolor, posuere rhoncus ligula faucibus vel.</p>
<p>Emphasised <em>italic text</em></p>
<a href="https://ratherinventive.com">Link to my website</a>
<!-- Comment or note that won't display -->
</body>
</html>
Rendered HTML
This is a web page
This is my sub title
First paragraph – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dui erat, iaculis et aliquam a, pulvinar quis libero. Ut vehicula felis vitae tortor porttitor interdum.
Second paragraph – Nam sed justo metus, tempor imperdiet quam. Pellentesque id suscipit sapien. Donec mollis velit sit amet est bibendum id fringilla dolor volutpat. Nullam tincidunt commodo dolor, posuere rhoncus ligula faucibus vel.
Emphasised italic text
Link to my websiteHTML in WordPress
- Peek behind curtain in WP (load example page in new window)
- Edit as HTML on block
- Code editor of typical page (vertical dots)
- Talk through elements
- Reminder of IMC34: WordPress Walkthrough 2021
- Learn more about HTML at w3schools.com/html
Formatting problems
- Use Shift Enter to make a line break. Demo on CTA
- Hyper linked space
- Alignment issues – Cleaning up HTML code from another website or MS Word file
- Problem if adding into plain text such as WooCommerce products or some page builders
Example HTML to use with HtmlWasher
<!-- ######## This is a comment ######## -->
<h3>This is a <span style="background-color: #89bbaa; color: #ffffff; padding: 0 3px;">sample text</span> you can play with!</h3>
<p><img style="width: 200px;" src="https://htmltidy.net/editor/images/htmltidy-logo.png" alt="HTML Tidy" /><strong> intant HTML beautifier offers you many code editing options:</strong></p>
<p>he following Tidy options are available:</p>
<ul style="background-color: #89bbaa; color: #ffffff; font-weight: bold; padding: 5px 40px;">
<li>Inline styles</li>
<li>Classes, ID's</li>
<li>Empty tags</li>
<li>Tags with one space</li>
<li>Successive spaces</li>
<li>Remove comments</li>
<li>Tag attributes</li>
<li>Make plain text</li>
</ul>
Rendered HTML
This is a sample text you can play with!
intant HTML beautifier offers you many code editing options:
he following Tidy options are available:
- Inline styles
- Classes, ID’s
- Empty tags
- Tags with one space
- Successive spaces
- Remove comments
- Tag attributes
- Make plain text
CSS Styles
- Open Customise > Additional CSS in WP
- Open HTML inspector. Show block highlighting
- How to find and tweak elements in inspector
- Add custom CSS examples
/* Change headings to red */
/* TODO: Add h3 or even .wp-block-heading */
h2 {
color: red;
}
/* Change link colour https://mycolor.space */
a {
color: red;
}
/* Change text size and reduce margin */
h2 {
margin-bottom: 5px; /*
font-size: 1.6em
}
/* Make icons green */
img {
filter: hue-rotate(280deg); /* colour wheel helpful */
}
Make media images grayscale
.wp-block-media-text__media {
filter: grayscale()
}
Learn more about CSS at w3schools.com/css
Magic codes
- Really called CSS classes
/* Make all icons of different size fit together */
.icons img {
aspect-ratio: 1/1; /* 16/9 is better */
object-fit: contain;
}
/* Highlight sections with a background colour */
.highlight {
background-color: #5EC272;
padding: ;
color: ;
border-radius: ;
}