From 15d6788223190e5327e7b07c6906462c1dcf1513 Mon Sep 17 00:00:00 2001 From: MjSeven <33125422+MjSeven@users.noreply.github.com> Date: Fri, 16 Nov 2018 22:06:18 +0800 Subject: [PATCH 1/8] Update 20180131 For your first HTML code lets help Batman write a love letter.md --- ...de lets help Batman write a love letter.md | 270 +++++++++++++++++- 1 file changed, 269 insertions(+), 1 deletion(-) diff --git a/sources/tech/20180131 For your first HTML code lets help Batman write a love letter.md b/sources/tech/20180131 For your first HTML code lets help Batman write a love letter.md index 78cb024bb4..56cccf15e1 100644 --- a/sources/tech/20180131 For your first HTML code lets help Batman write a love letter.md +++ b/sources/tech/20180131 For your first HTML code lets help Batman write a love letter.md @@ -556,4 +556,272 @@ We want to apply our styles to the specific div and img that we are using right
``` -and here’s how to use th +and here’s how to use this id in our embedded style as a selector: + ``` +#letter-container{ + ... +} +``` + Notice the “#” symbol. It indicates that it is an id, and the styles inside {…} should apply to the element with that specific id only. + Let’s apply this to our code: + ``` + +``` + ``` +
+

Bat Letter

+ +

+ 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. +

+``` + ``` +

You are the light of my life

+

+ You complete my darkness with your light. I love: +

+ +

+ I have learned a lot from you. You have occupied a special place in my heart over the time. +

+

I have a confession to make

+

+ 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. +

+

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

+

I love you Superman.

+

+ Your not-so-secret-lover,
+ Batman +

+
+``` + Our HTML is ready with embedded styling. + However, you can see that as we include more styles, the will get bigger. This can quickly clutter our main html file. So let’s go one step further and use linked styling by copying the content inside our style tag to a new file. + Create a new file in the project root directory and save it as style.css: + ``` +#letter-container{ + width:550px; +} +#header-bat-logo{ + width:100%; +} +``` + We don’t need to write `` in our CSS file. + We need to link our newly created CSS file to our HTML file using the ``tag in our html file. Here’s how we can do that: + ``` + +``` + We use the link element to include external resources inside your HTML document. It is mostly used to link Stylesheets. The three attributes that we are using are: + * rel: Relation. What relationship the linked file has to the document. The file with the .css extension is called a stylesheet, and so we keep rel=“stylesheet”. + * type: the Type of the linked file; it’s “text/css” for a CSS file. + * href: Hypertext Reference. Location of the linked file. + There is no at the end of the link element. So, is also a self-closing tag. + ``` + +``` + If only getting a Girlfriend was so easy :D + Nah, that’s not gonna happen, let’s move on. + Here’s the content of our loveletter.html: + ``` + +
+

Bat Letter

+ +

+ 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. +

+

You are the light of my life

+

+ You complete my darkness with your light. I love: +

+ +

+ I have learned a lot from you. You have occupied a special place in my heart over the time. +

+

I have a confession to make

+

+ 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. +

+

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

+

I love you Superman.

+

+ Your not-so-secret-lover,
+ Batman +

+
+``` + and our style.css: + ``` +#letter-container{ + width:550px; +} +#header-bat-logo{ + width:100%; +} +``` + Save both the files and refresh, and your output in the browser should remain the same. + ### A Few Formalities + Our love letter is almost ready to deliver to Batman, but there are a few formal pieces remaining. + Like any other programming language, HTML has also gone through many versions since its birth year(1990). The current version of HTML is HTML5. + So, how would the browser know which version of HTML you are using to code your page? To tell the browser that you are using HTML5, you need to include `` at top of the page. For older versions of HTML, this line used to be different, but you don’t need to learn that because we don’t use them anymore. + Also, in previous HTML versions, we used to encapsulate the entire document inside `` tag. The entire file was divided into two major sections: Head, inside ``, and Body, inside ``. This is not required in HTML5, but we still do this for compatibility reasons. Let’s update our code with ``, ``, `` and ``: + ``` + + + + + + +
+

Bat Letter

+ +

+ 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. +

+

You are the light of my life

+

+ 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. +

+

I have a confession to make

+

+ 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. +

+

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

+

I love you Superman.

+

+ Your not-so-secret-lover,
+ Batman +

+
+ + +``` + The main content goes inside `` and meta information goes inside ``. So we keep the div inside `` and load the stylesheets inside ``. + Save and refresh, and your HTML page should display the same as earlier. + ### Title in HTML + This is the last change. I promise. + You might have noticed that the title of the tab is displaying the path of the HTML file: + ![](https://cdn-images-1.medium.com/max/1000/1*PASKm4ji29hbcZXVSP8afg.jpeg) + We can use `` tag to define a title for our HTML file. The title tag also, like the link tag, goes inside head. Let’s put “Bat Letter” in our title: + ``` +<!DOCTYPE html> +<html> +<head> + <title>Bat Letter + + + +
+

Bat Letter

+ +

+ 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. +

+

You are the light of my life

+

+ 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. +

+

I have a confession to make

+

+ 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. +

+

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

+

I love you Superman.

+

+ Your not-so-secret-lover,
+ Batman +

+
+ + +``` + Save and refresh, and you will see that instead of the file path, “Bat Letter” is now displayed on the tab. + Batman’s Love Letter is now complete. + Congratulations! You made Batman’s Love Letter in HTML. + ![](https://cdn-images-1.medium.com/max/1000/1*qC8qtrYtxAB6cJfm9aVOOQ.jpeg) + ### What we learned + We learned the following new concepts: + * The structure of an HTML document + * How to write elements in HTML (

) + * How to write styles inside the element using the style attribute (this is called inline styling, avoid this as much as you can) + * How to write styles of an element inside (this is called embedded styling) + * How to write styles in a separate file and link to it in HTML using (this is called a linked stylesheet) + * What is a tag name, attribute, opening tag, and closing tag + * How to give an id to an element using id attribute + * Tag selectors and id selectors in CSS + We learned the following HTML tags: + *

: for paragraphs + *
: for line breaks + *