<!DOCTYPE html>
<html>
<head>
<title>My Second Webpage</title>
<!-- Internal CSS -->
<style>
/* Here you can write your internal CSS code. */
</style>
<!-- External CSS -->
<!-- This is a link to the external CSS file. this file consists only of CSS code. -->
<!-- It is common practice to use external CSS files. -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML Paragraphs, lines, breaks and horizontal rule. -->
<p> A paragraph starts on a new line, and browsers automatically add some white space (margin) before and after the paragraph.
The browser will automatically remove any extra spaces and lines when the page is displayed so you can not edit the final visual by adding extra spaces or extra lines in your HTML code. </p>
<!-- To create a comment in your code, that will not be displayed in the internet browser use CTRL + / shortcut. -->
<!-- Use ALT + Z shortcut to wrap worlds or find this tool under View -> Wrap Worlds. -->
<br>
<hr>
<pre> The text inside preserves element preserves both spaces and breaks (but change font). </pre>
<!-- HTML formatting -->
<p>
Changing the style of the text can be done inside the paragraph element.
<em>The emphasized text - content inside is displayed in italic. Screen readers still pronounce the words in emphasis using verbal stress.</em>
<i>Text has voice, mood, or role that's different from that of the regular text. The content inside is displayed in italic.</i>
<strong>Defines text with string importance. Content is typically displayed in bold.</strong>
<b>Bold text, without any extra importance.</b>
<mark>Defines text that should be marked or highlighted.</mark>
<del>Text that has been deleted from the document. Strike a line through.</del>
<ins>Text that has been inserted into the document. Underline inserted text.</ins>
</p>
<!-- HTML Links and Image -->
<!-- External links -->
<!-- Using Relative URL. Full web address. -->
<a href="https://www.bbc.co.uk/">BBC news</a>
<!-- Internal links. Local link, a link to age within the same website. -->
<a href="/lesson-2/elephant.jpeg">This can be an internal webpage, image, pdf, etc.</a>
<!-- src - specifies the path to an image. alt - specifies an alternative text for the image -->
<!-- Fill out the alt all the time. -->
<img src="https://www.txautism.net/assets/uploads/images/elephant.jpeg" alt="elephant">
<!-- Basic CSS -->
<!-- Inline CSS by using the style attribute inside the HTML element (opening tag)n -->
<h1 style="color: blue;">A Blue Heading</h1>
<p style=" color:yellow;
background-color: red;
font-family: 'Courier New', Courier, monospace;
font-size: 20px;
text-align: center;">
This paragraph has yellow text, red background, a specific font family, a size of text 20px and it is aligned to the centre.
</p>
</body>
</html>