On a good night, your stomach refuses to digest the big slice of pizza you ate for dinner, so you have to rush to the bathroom in your sleep.

In the bathroom, as you ponder why this is happening, you hear a muffled voice from the vent: “Hey, I’m Batman.”

What do you do?

Before you panic and are in a critical position, Batman says, “I need your help. I’m a big geek, but I don’t understand HTML. I need to write a love letter in HTML, would you help me?”

Who would say no to batman, right? So let’s write a love letter to Batman in HTML.

Your first HTML file

HTML web pages are just like any other file on your computer. Just as the same.doc file is opened in MS Word and a.jpg file is opened in an image viewer, an.html file is opened in a browser.

So, let’s create an.html file. You can do this in Notepad or any other editor, but I recommend using VS Code. Download and install VS Code here. It’s free and the only Microsoft product I like.

Create a directory on your system and name it “HTML Practice” (without quotes). Inside this directory, create another directory called “Batman’s Love Letter” (without quotes), which will be our project root directory. This means that all of our documents related to the project will be here.

Open VS Code, press CTRL + N to create a new file, CTRL + S to save the file. Switch to the “Batman’s Love Letter” folder and name it “loveletter.html”, then click Save.

Now, if you double-click on it in File Explorer, it will open in your default browser. I recommend using Firefox for Web development, but Chrome also works.

Let’s relate this process to something we’re already familiar with. Remember the first time you got a computer? The first thing I did was open Up MS Paint and draw something. You draw something in Paint and save it as an image, which you can then view in the Image Viewer. Later, if you want to edit the image again, you reopen it in Paint, edit and save it.

Our current process is very similar. Just as we used Paint to create and edit images, we used VS Code to create and edit HTML files. Just as we use an image viewer to view images, we use a browser to view our HTML pages.

Paragraphs in HTML

We have an empty HTML file and here is the first paragraph batman wants to write in his love letter.

“After all the battles we fought together, After all the difficult times we saw together, And after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”

Copy this into VS Code loveletter.html. Click View -> Toggle Word Wrap (Alt + Z).

Save and open it in your browser. If it is already open, click the refresh button in your browser.

Look! That was your first web page!

Our first paragraph is ready to go, but this is not the recommended way to write paragraphs in HTML. We have a specific way to let the browser know that a text is a paragraph.

If you wrap text with

and

, the browser will recognize the text in

and

as a paragraph. Let’s do this: 

<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>Copy the code

By writing paragraphs in

and

, you create an HTML element. A web page is a collection of HTML elements.

Let’s start with some terminology:

is the start tag,

is the end tag, and “p” is the tag name. The text between the opening and closing tags of an element is the content of the element.

“Style” attribute

Above, you will see text covering the entire width of the screen.

We don’t want that. No one wants to read such a long line. Let’s set the width of the paragraph to 550px.

We can do this by using the element’s style attribute. You can define the style of the element (for example, width in our case) in its style property. The following line will create an empty style property on the P element:

<p style="">... </p>Copy the code

Do you see that empty “”? This is where we define the appearance of the element. Now we need to set the width to 550px. Let’s do this:

<p style="width:550px;" > After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p>Copy the code

We set the width property to 550px, separated by a colon:, with a semicolon; The end.

Also, notice how we put

and

on separate lines, with the text indented with a TAB character. Set the code up like this to make it more readable.

Lists in HTML

Next, Batman hopes to list some of the qualities he admires in people, such as:

You complete my darkness with your light. I love:
- the way you see good in the worst things
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over time.Copy the code

It seems simple enough.

Let’s go ahead and copy the required text under

: 

<p style="width:550px;" > After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <p style="width:550px;" > You complete my darkness with your light. I love: - the way you see good in the worse - the way you handle emotionally difficult situations - the way you look at Justice I have learned a lot from you. You have occupied a special place in my heart over the time. </p>Copy the code

Save and refresh the browser.




A: wow! What’s going on here? Where’s our list?

If you look closely, you will notice that the newline character is not displayed. In the code we write the list items on a new line, but the items are displayed on a line in the browser.

If you want to insert a newline character in HTML (newline), you must use

. Let’s use

to see what it looks like:

<p style="width:550px;" > After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <p style="width:550px;" > You complete my darkness with your light. I love: <br> - the way you see good in the worse <br> - the way you handle emotionally difficult situations <br> - the way you look at Justice <br> I have learned a lot from you. You have occupied a special place in my heart over the time. </p>Copy the code

Save and refresh:




Ok, now it looks just like we want it to!

Also, notice that we didn’t write a

. Some tags do not require closing tags (they are called self-closing tags).

One more thing: we didn’t use

between the two paragraphs, but the second paragraph still starts on a new line, because the

element inserts a newline character automatically.

We write the list in plain text, but there are two tags we can use to achieve the same goal:

    and

  • .

Let’s explain what the names mean: UL stands for Unordered List and Li stands for List Item. Let’s use them to display our list:

<p style="width:550px;" > After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <p style="width:550px;" > You complete my darkness with your light. I love: <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way  you look at Justice</li> </ul> I have learned a lot from you. You have occupied a special place in my heart over the time. </p>Copy the code

Before copying the code, note the differences:

  • We deleted all of them<br>Because every<li>Is automatically displayed in a new line
  • We include each list item in the<li> 和 </li>between
  • We wrap the set of all list items in<ul> 和 </ul>between
  • We don’t have anything like<p>Element defined that way<ul>Width of the element. This is because<ul> 是 <p>The child node of,<p>It’s been constrained to 550px, so<ul>It doesn’t go beyond that.

Let’s save the file and refresh the browser to see the result:




You’ll immediately notice that the key flags are displayed before each list item. We don’t need to write a “-” before each list item now.

On closer inspection, you’ll notice that the last line is more than 550px wide. Why is that? Because HTML does not allow a

    element in a

    element. Let’s put the first and last lines in separate

    elements:

<p style="width:550px;" > After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <p style="width:550px;" > You complete my darkness with your light. I love: </p> <ul style="width:550px;" > <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p style="width:550px;" > I have learned a lot from you. You have occupied a special place in my heart over the time. </p>Copy the code

Save and refresh.

Notice that this time we also define the width of the

    element. That is because we have now placed the

      element outside the

      element.

Defining the width of all elements in a love letter can become cumbersome. We have one specific element for this purpose: the

element. A

element is a generic container for grouping content so that you can easily style it.

Let’s wrap the entire love letter with a

element and give it a width of 550px. 
<div style="width:550px;" > <p> After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <p> You complete my darkness with your light. I love: </p> <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p> I have learned a lot from you. You have occupied a special place in my heart over the time. </p> </div>Copy the code

Great, our code now looks much cleaner.

Headings in HTML

Batman is so happy with the results so far that he wants to title his love letters. He wanted to write a title: “Bat Letter”. Of course, you’ve seen the name, haven’t you? 😀

You can add headings using the < H1 >, < H2 >, < H3 >, < H4 >, < H5 > and < H6 > tags, with < H1 > being the largest and most dominant heading and < H6 > being the smallest heading.




Let’s use

as the main heading and a subheading before the second paragraph:

<div style="width:550px;" > <h1>Bat Letter</h1> <p> After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <h2>You are the light of my life</h2> <p> You complete my darkness with your light. I love: </p> <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p> I have learned a lot from you. You have occupied a special place in my heart over the time. </p> </div>Copy the code

Save and refresh.




Images in HTML

Our love letter is unfinished, but one big thing is missing before we go any further: the Batman logo. Have you ever seen anything that’s Batman without the Batman logo?

Don’t.

So, let’s add a Batman logo to our love letters.

Including images in HTML is just like including images in a Word file. In MS Word, you go to Menu -> Insert -> Image -> then navigate to the image location -> Select Image -> Click Insert.

In HTML, we use the tag to let the browser know what image we need to load, rather than clicking on the menu. We write the location and name of the file in the SRC property. If the image is in the project root, we can simply write the name of the image file in the SRC property.

Before we go any further, download the Batman logo from here. You may want to crop extra white space in the image. Copy the image in the project root directory and rename it to “bat-logo.jpeg”.

<div style="width:550px;" > <h1>Bat Letter</h1> <img src="bat-logo.jpeg"> <p> After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <h2>You are the light of my life</h2> <p> You complete my darkness with your light. I love: </p> <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p> I have learned a lot from you. You have occupied a special place in my heart over the time. </p> </div>Copy the code

We include the tag in line 3. This tag is also a self-closing tag, so we don’t need to write . In the SRC property, we give the name of the image file. This name should be exactly the same as the image name, including the extension (.jpeg) and its case.

Save and refresh to see the results.




Damn it! What just happened?

When you include an image with the tag, by default, the image will be displayed at its original resolution. In our example, the image is much wider than 550px. Let’s define its width using the style property:

<div style="width:550px;" > <h1>Bat Letter</h1> <img src="bat-logo.jpeg" style="width:100%"> <p> After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <h2>You are the light of my life</h2> <p> You complete my darkness with your light. I love: </p> <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p> I have learned a lot from you. You have occupied a special place in my heart over the time. </p> </div>Copy the code

You’ll notice that this time we defined the width using “%” instead of “px”. When we define the width in “%”, it will be the percentage of the parent element’s width. So 100% of 550px will give us 550px.

Save and refresh to see the results.




That’s great! This brings a shy smile to batman’s face :).

Bold and italic in HTML

Now Batman wants to acknowledge his love in the last few paragraphs. He has the following text for you to write in HTML:

“I have a confession to make

It feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.

I don’t show my emotions, but I think this man behind the mask is falling for you.”

When you read this, you ask Batman, “Wait, who is this for?” Batman says:

“This is for Superman.”




You say: Oh! I thought it was for Wonder Woman.

Batman says: No, this is for Superman. Please write “I love you Superman” at the end.

Ok, let’s write:

<div style="width:550px;" > <h1>Bat Letter</h1> <img src="bat-logo.jpeg" style="width:100%"> <p> After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <h2>You are the light of my life</h2> <p> You complete my darkness with your light. I love: </p> <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p> I have learned a lot from you. You have occupied a special place in my heart over the time. </p> <h2>I have a confession to make</h2> <p> It feels like my chest does have a heart. You make my  heart beat. Your smile brings smile on my face, your pain brings pain to my heart. </p> <p> I don't show my emotions, but I think this man behind the mask is falling for you. </p> <p>I love you Superman.</p> <p> Your not-so-secret-lover, <br> Batman </p> </div>Copy the code

The letter was almost complete, and Batman wanted to make two more changes. Batman wants the word “does” in italics in the first sentence of the final paragraph, and the phrase “I love you Superman” in bold.

We use and to display the text in italics and bold. Let’s update these changes:

<div style="width:550px;" > <h1>Bat Letter</h1> <img src="bat-logo.jpeg" style="width:100%"> <p> After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you. </p> <h2>You are the light of my life</h2> <p> You complete my darkness with your light. I love: </p> <ul> <li>the way you see good in the worse</li> <li>the way you handle emotionally difficult situations</li> <li>the way you look at Justice</li> </ul> <p> I have learned a lot from you. You have occupied a special place in my heart over the time. </p> <h2>I have a confession to make</h2> <p> It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart. </p> <p> I don't show my emotions, but I think this man behind the mask is falling for you. </p> <p><strong>I love you Superman.</strong></p> <p> Your not-so-secret-lover, <br> Batman </p> </div>Copy the code




Styles in HTML

You can style or define the appearance of HTML elements in three ways:

  • Inline style: We use the element’sstyleProperty to write styles. That’s what we’ve used so far, but it’s not a good practice.
  • Embedded styles: we are in by<style> 和 </style>All styles are written in the “style” element of the package.
  • Linked style Sheets: We style all elements in a separate file with a.css extension. This file is called a style sheet.

Let’s look at how to define inline styles for

: 
<div style="width:550px;" >Copy the code

We can write the same style in

:

div{
  width:550px;
}Copy the code

In embedded styles, we write styles separate from elements. So we need a way to associate elements and their styles. The first word “div” does just that. It lets the browser know that curly braces {… } all styles within the “div” element. Because this syntax determines the element to which the style is applied, it is called a selector.

The way we write styles remains the same: properties (width) and values (550px) are separated by colons (:) and semicolons (;). The end.

Let’s remove the inline style from the

and
elements and write it to the 

<style>
  div{
    width:550px;
  }
  img{
    width:100%;
  }
</style>
<div>
  <h1>Bat Letter</h1>
  <img src="bat-logo.jpeg">
  <p>
    After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
  </p>
<h2>You are the light of my life</h2>
  <p>
    You complete my darkness with your light. I love:
  </p>
  <ul>
    <li>the way you see good in the worse</li>
    <li>the way you handle emotionally difficult situations</li>
    <li>the way you look at Justice</li>
  </ul>
  <p>
    I have learned a lot from you. You have occupied a special place in my heart over the time.
  </p>
  <h2>I have a confession to make</h2>
  <p>
    It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
  </p>
  <p>
    I don't show my emotions, but I think this man behind the mask is falling for you.
  </p>
  <p><strong>I love you Superman.</strong></p>
  <p>
    Your not-so-secret-lover, <br>
    Batman
  </p>
</div>Copy the code

Save and refresh, and the result should remain the same.

But there’s a big problem. What if we have multiple

and
elements in our HTML file? The styles we defined for div and IMG in the

If you add another div in later code, that div will also be 550px wide. We don’t want that.

We want to apply our style to the specific div and IMG that we are currently using. To do this, we need to provide unique ids for the div and img elements. Here’s how to assign an id to an element using the ID attribute:

<div id="letter-container">Copy the code

Here’s how to use this ID as a selector in an embedded style:

#letter-container{
  ...
}Copy the code

Notice the # sign. It means it is an ID, {… } should only apply to elements with that particular ID.

Let’s apply it:

slightlyCopy the code

HTML is ready for embedded styling.

However, as you can see, as we include more and more styles,

will become very large. This can quickly mess up our main HTML file.

So let’s go a step further and use link styles by copying the contents of the

Create a new file in the project root directory and save it as “style.css” :

#letter-container{
  width:550px;
}
#header-bat-logo{
  width:100%;
}Copy the code

We don’t need to write

in the CSS file.

We need to use the tag in the HTML file to link the newly created CSS file to the HTML file. Here’s how we did it:

<link rel="stylesheet" type="text/css" href="style.css">Copy the code

We use the element to include external resources in the HTML document, which is primarily used to link stylesheets. The three attributes we use are:

  • rel: relationships. Link file to document relationship. Files with the.css extension are called stylesheets, so we leave rel= “stylesheet”.
  • type: Type of linked file; For a CSS file it is “text/ CSS”.
  • href: Hypertext reference. The location of the link file.

The link element does not end with . Therefore, is also a self-closing tag.

<link rel="gf" type="cute" href="girl.next.door">Copy the code

If it’s just getting a girlfriend, it’s easy: D

Unfortunately, it’s not that simple. Let’s move on.

This is the content of our “loveletter.html” :

slightlyCopy the code

“Style.css. CSS” content:

#letter-container{
  width:550px;
}
#header-bat-logo{
  width:100%;
}Copy the code

Save the file and refresh, leaving the output in the browser unchanged.

Some procedures

Our love letters are ready to go to Batman, but there are some official bits.

Like any other programming language, HTML has gone through many versions since it was born (in 1990), and the current version is HTML5.

So how does the browser know which version of HTML you’re using to write a page? To tell the browser that you’re using HTML5, you need to include
. For older versions of HTML, this line is different, but you don’t need to know about them because we don’t use them anymore.

Additionally, in previous VERSIONS of HTML, we used to wrap the entire document in a < HTML >
tag. The entire file is divided into two main parts: the header is inside and the body is inside . This is not required in HTML5, but we still do it for compatibility reasons. Let’s update our code with

, < HTML >, , and :

slightlyCopy the code

The main content is in and the meta information is in . So we save

inside and load the stylesheet inside .

Save and refresh, and your HTML page should display the same content as before.

The title of the HTML

I swear, this is the last time.

You may have noticed that the TAB title is showing the path to the HTML file:




We can use the

tag to define the title of an HTML file. The title tag is also inside the like the link tag. Let’s add “Bat Letter” to the title: 

slightlyCopy the code

Save and refresh, and you’ll see “Bat Letter” displayed on the TAB instead of the file path.

Batman’s Love Letters are now complete.

A: congratulations! You made batman love letters in HTML.




What have we learned

We learned the following new concepts:

  • The structure of an HTML document
  • How to write elements in HTML (<p></p>)
  • How to use the style attribute to write styles inside elements (this is called inline styles, avoid this if possible)
  • How to in<style>... </style>The style of the written element in (this is called embedded style)
  • How does it work in HTML<link>Write the style and link it in a separate file (this is called a linked style sheet)
  • What are tag names, attributes, start tags, and end tags
  • How do I use the ID attribute to assign an ID to an element
  • Label selectors and ID selectors in CSS

We learned the following HTML tags:

  • <p>: Used in paragraphs
  • <br>: used for line breaks
  • <ul>,<li>: Display a list
  • <div>: The element used to group our letters
  • <h1>,<h2>: for headings and subheadings
  • <img>: used to insert images
  • <strong>,<em>: for bold and italic text styles
  • <style>: for embedded styles
  • <link>: used to contain external stylesheets
  • <html>: used to wrap an entire HTML document
  • <! DOCTYPE html>: Let the browser know we’re using HTML5
  • <head>: Package meta information, such as<link> 和 <title>
  • <body>: The body of the HTML page for actual display
  • <title>: The title used for an HTML page

We learned the following CSS properties:

  • Width: Used to define the width of an element
  • CSS unit: “px” and “%”

That’s all for today guys, I’ll see you in the next tutorial.

Author introduction: developers + author | | http://supersarkar.com http://twitter.com/supersarkar

via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

By Kunal Sarkar

This article is originally compiled by LCTT and released in Linux China