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 deleted file mode 100644 index 78cb024bb4..0000000000 --- a/sources/tech/20180131 For your first HTML code lets help Batman write a love letter.md +++ /dev/null @@ -1,559 +0,0 @@ -Translating by MjSeven - - -For your first HTML code, let’s help Batman write a love letter -============================================================ - -![](https://cdn-images-1.medium.com/max/1000/1*kZxbQJTdb4jn_frfqpRg9g.jpeg) -[Image Credit][1] - -One fine night, your stomach refuses to digest the large Pizza you had at dinner, and you have to rush to the bathroom in the middle of your sleep. - -In the bathroom, while wondering why this is happening to you, you hear a heavy voice from the vent: “Hey, I am Batman.” - -What would you do? - -Before you panic and stand up in middle of the critical process, Batman says, “I need your help. I am a super geek, but I don’t know HTML. I need to write my love letter in HTML — would you do it for me?” - -Who could refuse a request from Batman, right? Let’s write Batman’s love letter in HTML. - -### Your first HTML file - -An HTML webpage is like other files on your computer. As a .doc file opens in MS Word, a .jpg file opens in Image Viewer, and a .html file opens in your Browser. - -So, let’s create a .html file. You can do this in Notepad, or any other basic editor, but I would recommend using VS Code instead. [Download and install VS Code here][2]. It’s free, and the only Microsoft Product I love. - -Create a directory in your system and name it “HTML Practice” (without quotes). Inside this directory, create one more directory called “Batman’s Love Letter” (without quotes). This will be our project root directory. That means that all our files related to this project will live here. - -Open VS Code and press ctrl+n to create a new file and ctrl+s to save the file. Navigate to the “Batman’s Love Letter” folder and name the file “loveletter.html” and click save. - -Now, if you open this file by double-clicking it from your file explorer, it will open in your default browser. I recommend using Firefox for web development, but Chrome is fine too. - -Let’s relate this process to something we are already familiar with. Remember the first time you got your hands on a computer? The first thing I did was open MS Paint and draw something. You draw something in Paint and save it as an image and then you can view that image in Image Viewer. Then if you want to edit that image again, you re-open it in Paint, edit it, and save it. - -Our current process is quite similar. As we use Paint to create and edit images, we use VS Code to create and edit our HTML files. And as we use Image Viewer to view the images, we use the Browser to view our HTML pages. - -### Your first Paragraph in HTML - -We have our blank HTML file, so here’s 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 the paragraph in your loveletter.html in VS Code. Enable word wrap by clicking View -> Toggle Word Wrap (alt+z). - -Save and open the file in your browser. If it’s already open, click refresh on your browser. - -Voila! That’s your first webpage! - -Our first paragraph is ready, but this is not the recommended way of writing a paragraph in HTML. We have a specific way to let the browser know that a text is a paragraph. - -If you wrap the text with `

` and `

`, then the browser will know that the text inside the `

` and `

` is a paragraph. Let’s do this: - -``` -

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.

-``` - -By writing the paragraph inside `

` and `

` you created an HTML element. A web page is collection of HTML elements. - -Let’s get some of the terminologies out of the way first: `

` is the opening tag, `

` is the closing tag, and “p” is the tag name. The text inside the opening and closing tag of an element is that element’s content. - -### The “style” attribute - -You will see that the text covers the entire width of the screen. - -We don’t want that. No one want’s to read such long lines. Let’s give a width of, say, 550px to our paragraph. - -We can do that by using the element’s “style” attribute. You can define an element’s style (for example, width in our case), inside its style attribute. The following line will create an empty style attribute on a “p” element: - -``` -

...

-``` - -You see that empty `""`? That’s where we will define the looks of the element. Right now we want to set the width to 550px. Let’s do that: - -``` -

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

-``` - -We set the “width” property to 550px separated by a colon “:” and ended by a semicolon “;”. - -Also, notice how we put the `

` and `

` in separate lines and the text content indented with one tab. Styling your code like this makes it more readable. - -### Lists in HTML - -Next, Batman wants to list some of the virtues of the person that he admires, like this: - -“ 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.” - -This looks simple. - -Let’s go ahead and copy the required text below the `

:` - -``` -

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

-``` - -Save and refresh your browser. - - -![](https://cdn-images-1.medium.com/max/1000/1*M0Ae5ZpRTucNyucfaaz4uw.jpeg) - -Woah! What happened here, where is our list? - -If you look closely, you will observe that line breaks are not displayed. We wrote the list items in new lines in our code, but those are displayed in a single line in the browser. - -If you want to insert a line break in HTML (newline) you have to mention it using `
`. Let’s use `
` and see how it looks: - -``` -

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

-``` - -Save and refresh: - - -![](https://cdn-images-1.medium.com/max/1000/1*Mj4Sr_jUliidxFpEtu0pXw.jpeg) - -Okay, now it looks the way we want it to. - -Also, notice that we didn’t write a `
`. Some tags don’t need a closing tag, (and they’re called self-closing tags). - -One more thing: we didn’t use a `
` between the two paragraphs, but still the second paragraph starts from a new line. That’s because the “p” element automatically inserts a line break. - -We wrote our list using plain text, but there are two tags we can use for this same purpose: `