happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

UI 변경

Let's learn about list tag and link tag ^-^

When searching internet, we could see the menu. Most of menus are made up of list tags.

A list tag has a numberless form and a numbered form. If there is no number, start with <ul> as below.

<ul>
<li>내용1</li>
<li>내용1</li>
<li>내용1</li>
</ul>

번호가 있는 경우면은 <ol>로 시작합니다.

<ol>
<li>내용1</li>
<li>내용1</li>
<li>내용1</li>
</ol>

<li></li> 는 목록의 시작과 끝입니다.

<li>네이버</li> 이렇게 하면 메뉴는 네이버 하나만 나오구요

<li>google</li>
<li>apple</li>

If you type tags as abobe, the menu will list two, google and apple.

So let 's practice, typing the source.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>리스트를 만들어 봅시다. </title>
</head>
<body>
<h2>리스트 만들기</h2><br />
<h3>번호가 없는 리스트</h3>
<ul>
<li>네이버</li>
<li>다음</li>
<li>네이트</li>
</ul>
<br />
<h3>번호가 있는 리스트</h3>
<ol>
<li>네이버</li>
<li>다음</li>
<li>네이트</li>
</ol>
</body>
</html>

Let's look at the results.


list_tag

Let's learn about hyperlinks from now on.


When we click news on Naver, etc., we move to somewhere, which is the hyperlink.


<a href="이동할 주소 입력">링크이름<a>

You can also create links to download files. Inside the tag, type “download”.

<a href="다운로드할 파일 경로와 파일명 입력" download>링크이름<a>

Let's do it now. J

This is the hyperlink tag.
<a href="주소"> Contents, text, images, etc. that you would like to make a link</a>

So let's test it with the list source we have practiced. ^^


<li></li>We'll put a hyperlink tag inside the tag.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>하이퍼링크를 학습해보자.</title>
</head>
<body>
<h2>하이퍼 링크</h2><br />
<ul>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://www.daum.net">다음</a></li>
<li><a href="http://www.nate.com">네이트</a></li>
</ul>
</body>
</html>

Please test the above source and click Naver, Daum or Nate

hyperlink_tag

If you click on the link in the sample above, does it move directly from the web browser you are currently viewing?
So let's open a new window and find out how to get the page you want from there.
Put a target="_blank” in a tag. Let's test it with the target blank in the above source.
Please write the source as below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>하이퍼링크를 학습해보자.</title>
</head>
<body>
<h2>하이퍼 링크</h2><br />

<ul>
    <li><a href="http://www.naver.com" target="_blank">네이버</a></li>
    <li><a href="http://www.daum.net" target="_blank">다음</a></li>
    <li><a href="http://www.nate.com" target="_blank">네이트</a></li>
</ul>
</body>
</html>

Let's test it. ^^


hyperlink_tag_target

As shown above, Naver appears in a separate window

다음은 이미지를 다운로드하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>에버디벨 마스코트 다운로드.</title>
</head>
<body>
<a href="http://www.startwebcoding.co.kr/material/images/main/happyCatHeader.png" download>Image Download<a>
</body>
</html>

Then I will finish this lesson here and see you next time. In the next lesson, let's pop up an image. ^^

강좌로 돌아가기