[HTML 1/2] Let's learn HTML and make your website in 10mins !

-
In this post, I'll show you how to make your website in 10mins ..!

Go to https://replit.com/  and log in

and create new HTML


you will see like this page.

But let me delete everything to show how it works from the scratch.


When you print something on the screen, you're going to use <h> tag
<h1> is normally used for main headings, <h2> for subheadings, <h3> <h4> ... for different levels of subheadings. 

Let's make main headings.  We're going to make snake world.. ๐Ÿ˜

1. <h1> tag </h1>  main headings

<h1>Hello Snake's world</h1>

in HTML; you always use opening and closing tags 

and "Run"


you see the "Hello Snake's world" on the page. 



2. Paragraph  <p> tag

 <p> tag for paragraph 
 
I make <h2> for subheading and <p> for paragraph 

"<h2>snake characteristics</h2>

<p>Snakes have some clear differences from other reptiles. They have no limbs, no moveable eyelids, and no ear openings. The teeth of most nonvenomous snakes form 2 rows in the upper jaw and 1 row in the lower jaw. The teeth are curved backward to help keep struggling prey from escaping.</p>"



3. Comment 

You can communicate with other team members by commenting in HTML 

with...   <!--    -->

Let's say we want to comment paragraph and we don't want them to show on the page. 

<!-- <p>Snakes have some clear differences from other reptiles. They have no limbs, no moveable eyelids, and no ear openings. The teeth of most nonvenomous snakes form 2 rows in the upper jaw and 1 row in the lower jaw. The teeth are curved backward to help keep struggling prey from escaping.</p>" -->

you can make like this and it won't show on the page. 



4.  HTML5 elements 

HTML introduces more descriptive ..  main, header, footer, nav, video, article, section and others.

Theses tags give a descriptive structure to your HTML making it easier to read and help with Search Engine Optimization (SEO) and accessibility

Let's make main over paragraph

<main>
<p>Snakes have some clear differences from other reptiles. They have no limbs, no moveable eyelids, and no ear openings. The teeth of most nonvenomous snakes form 2 rows in the upper jaw and 1 row in the lower jaw. The teeth are curved backward to help keep struggling prey from escaping.</p>
</main>


5.  Add Image

you can add an image to the webpage by using img element (img src)

Let's search an image on Google and copy its image address 




<img src = "https://www.merckvetmanual.com/-/media/manual/veterinary/images/e/x/o/exo_snake_anatomy.gif?thn=0&sc_lang=en">

All img elements must have an alt atrribute, which is used for screen readings to improve accessibility and is displayed if the image fails to load.


<img src = "https://www.merckvetmanual.com/-/media/manual/veterinary/images/e/x/o/exo_snake_anatomy.gif?thn=0&sc_lang=en" alt ="snake characteristics">



It already looks pretty cool !


6. External pages with Anchor Elements

You can use a (anchor) elements to link to content outside of your web page. 

<a href= "  " > snake photos (description) </a>


<a href= "https://en.wikipedia.org/wiki/Snake" target="_blank"> snake photos </a>

target="_blank"  means opening new page to show the pictures
if not with target="_blank", it will show the pics on the same page. 




Now you can see the href link at the bottom !




------ Internal section-----

Link to Internal Sections of a Page with Anchor Elements

a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.

To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.


Change your external link to an internal link by changing the href attribute to #footer and the text from snake photos to Jump to Bottom.

Remove the target="_blank" attribute from the anchor tag since this causes the linked document to open in a new window tab.

Then add an id attribute with a value of footer to the <footer> element at the bottom of the page.



Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt ๋Š”  ๊ทธ ๊ฐ’์˜ ์•„๋ž˜๋Š” ์ „๋ถ€ ๋ถˆ๋Ÿฌ์˜ด. ์˜ˆ๋ฅผ๋“ค์–ด Banana๋ฅผ ์ž…๋ ฅํ–ˆ์„ ๊นจ 500๊ณผ ๊ทธ ์•„๋ž˜ ๊ฐ’๋“ค๋„ ๋ชจ๋‘ ๋ถˆ๋Ÿฌ์˜ด. ๋•Œ๋ฌธ์— break ๋ฅผ ์จ์ค˜์•ผํ•จ default๋Š” ํ•ด๋‹นํ•˜์ง€ ์•Š๋Š” ๊ฐ’์„ ์ž…๋ ฅํ–ˆ์„ ๋•Œ ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more