December 10, 2018 · coding html

How to structure text in HTML

It’s important to keep all code structured properly within each section of code so it’s easier to keep track of what information is related to which section of the website.

Untitled8-1

To do this I use the extension beautify (shortcut is to right click → command palette → beautify) . This will change the code from this

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Amy's Personal Site</title>
        </head>
        <body>
            <h1> Amy Pelham</h1>

        </body>
    </html>

To this

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Amy's Personal Site</title>
</head>

<body>
    <h1> Amy Pelham</h1>

</body>

</html>

Italicizing text

There are two options to italicize text - <i> and <em>
<i> is related to the styling of the font whereas <em> is to place stress emphasis of the words contents.

In HTML it more important to have the right structure than the right look to your code.

An example for <em> could be: "Just do it already!", or: "We had to do something about it". A person or software reading the text would pronounce the words in italics with an emphasis, using verbal stress.

An example for <i> could be: "The Queen Mary sailed last night". Here, there is no added emphasis or importance on the word "Queen Mary".

It is good practice to use <em> over <i>

<body>
    <h1>Amy BLANK</h1>
    <p><em>Cat Extraordinaire🐈</em></p>
</body>

The same example is for the action to bold text. The two options are <b> and <strong>.
Again, because html is about strong the correct tag to use will be <strong>, <b> merely styles the text.
The <strong> element is for content that is of greater importance, while the <b> element is used to draw attention to text without indicating that it's more important.

33-1

Creating an unordered list

To create an unordered list, you use the following code

<ul>
    <li>Chad</li>
    <li>Chang</li>
    <li>Paddy</li>
    <li>Spot</li>
    <li>Morris</li>
</ul>

The other option is to have an ordered list which would use the following code

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Inserting Images

66-1

I decided to update the img snippet that was coming up in VSCode. To do this I did the below in my html.json file

{
		"Amys HTML Snippet": {
		"prefix": "html-amy",
		"body": [
			"<!DOCTYPE html>",
			"\t<html>",
			"\t\t<head>",
			"\t\t\t<meta charset=\"utf-8\">",
			"\t\t\t<title></title>",
			"\t\t</head>",
			"\t\t<body>",
			"",
			"\t\t</body>",
			"\t</html>"
		],
		"description": "Amy's HTML Snippet"
	},

		"Amy's img Snippet": {
		"prefix": "img-amy",
		"body": [
			"<img src=\"\" alt=\"\">" 
		],
		"description": "Amy's img Snippet"
	}
}

There are two ways to source the picture I want to display - either through a website or self-hosted.

Self-hosted is safer, this way the image won’t run the risk of being taken down.
To retrieve from a website write
88-1

Alt= refers to what the image is about - browsers will use this to help redirect traffic to relevant pages

To retrieve the picture from your own computer, add the image to the document's folder the direct the code to the name of the picture instead of the website address
99-1
111-1

To make this even neater it is best to add a folder within the document and rename is "images" - remember you will need to update the src directly to get to the picture
222-1

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket