{"id":1203,"date":"2019-09-09T20:40:43","date_gmt":"2019-09-09T13:40:43","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=1203"},"modified":"2022-02-11T14:25:29","modified_gmt":"2022-02-11T07:25:29","slug":"thiet-ke-website-html-nhu-the-nao","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/thiet-ke-website-html-nhu-the-nao.html","title":{"rendered":"Thi\u1ebft k\u1ebf website html nh\u01b0 th\u1ebf n\u00e0o"},"content":{"rendered":"

Thi\u1ebft k\u1ebf website html<\/strong><\/a> nh\u01b0 th\u1ebf n\u00e0o? T\u00ecm hi\u1ec3u c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a m\u1ed9t thi\u1ebft k\u1ebf website. M\u1ed9t document HTML lu\u00f4n b\u1eaft \u0111\u1ea7u b\u1eb1ng <html> v\u00e0 k\u1ebft th\u00fac b\u1eb1ng <\/html> (trong \u0111\u00f3 b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 vi\u1ebft nh\u1ecf ho\u1eb7c vi\u1ebft hoa <html> v\u00e0 <\/html>).<\/p>\n

\"thi\u1ebft<\/p>\n

Nh\u1edd c\u00f3 c\u1eb7p TAG n\u00e0y m\u00e0 Browser bi\u1eaft \u0111\u01b0\u1ee3c \u0111\u00f3 l\u00e0 HTML \u2013 document \u0111\u1ec3 tr\u00ecnh duy\u1ec7t. Nh\u1eefng ch\u1eef \u0111\u00f3 ch\u1ec9 \u0111\u1ec3 d\u00e0nh ri\u00eang cho Browser. Ng\u01b0\u1eddi \u0111\u1ecdc ch\u1ec9 nh\u1eadn \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec vi\u1ebft gi\u1eefa c\u1eb7p TAG <body> v\u00e0 <\/body> trong m\u1ed9t document html, ch\u00fa th\u00edch \u0111\u01b0\u1ee3c d\u00f9ng nh\u01b0 sau:<\/p>\n

<!\u2013 \u00d0\u00e2y l\u00e0 d\u00f2ng ch\u00fa th\u00edch, ch\u1ec9 d\u00e0nh ri\u00eang cho b\u1ea1n, browser b\u1ecf qua d\u00f2ng n\u00e0y \u2013><\/p>\n

Nh\u01b0 v\u1eady m\u1ed9t trang web vi\u1ebft b\u1eb1ng html s\u1ebd c\u00f3 c\u1ea5u tr\u00fac nh\u01b0 sau:<\/h2>\n

Code:<\/p>\n

<html><\/p>\n

<body><\/p>\n

<!– Ph\u1ea7n b\u1ea1n c\u1ea7n tr\u00ecnh b\u00e0y. V\u00ed d\u1ee5 m\u1ed9t b\u1ee9c \u1ea3nh hay l\u1eddi v\u0103n. –><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

M\u1ed9t trang tr\u1ed1ng, kh\u00f4ng c\u00f3 n\u1ed9i dung v\u1edbi n\u1ec1n m\u00e0u da cam s\u1ebd \u0111\u01b0\u1ee3c vi\u1ebft:<\/h2>\n

<html><\/p>\n

<body bgcolor=\u201dorange\u201d><\/p>\n

<!\u2013 Ph\u1ea7n b\u1ea1n c\u1ea7n tr\u00ecnh b\u00e0y. V\u00ed d\u1ee5 m\u1ed9t b\u1ee9c \u1ea3nh hay l\u1eddi v\u0103n. \u2013><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

M\u1ed9t Homepage c\u00f2n c\u00f3 Thi\u1ebft k\u1ebf website html n\u1ed9i dung (l\u1eddi vi\u1ebft v\u00e0 h\u00ecnh \u1ea3nh):<\/h2>\n

Code:<\/p>\n

<html><\/p>\n

<body bgcolor=”beige”><\/p>\n

<font face=”Arial” size=”2″ color=”black”><\/p>\n

\u0110\u00e2y l\u00e0 d\u00f2ng ch\u1eef vi\u1ebft b\u1eb1ng font Arial, m\u00e0u \u0111en, c\u1ee1 2<\/p>\n

<\/font><br><br><\/p>\n

<font face=”Verdana” size=”3″ color=”navy”><\/p>\n

C\u00f2n \u0111\u00e2y l\u00e0 d\u00f2ng ch\u1eef vi\u1ebft b\u1eb1ng font Verdana, m\u00e0u xanh n\u01b0\u1edbc bi\u1ec3n, c\u1ee1 3<\/p>\n

<\/font><br><br><\/p>\n

<font face=”Bodoni” size=”4″ color=”red”><\/p>\n

D\u00f2ng n\u00e0y l\u1ea1i l\u00e0 font Bodoni, m\u00e0u \u0111\u1ecf, c\u1ee1 4 <\/font><br><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

Face th\u1ec3 hi\u1ec7n cho m\u1eabu ch\u1eef, size th\u1ec3 hi\u1ec7n cho c\u1ee1 ch\u1eef (s\u1ed1 c\u00e0ng l\u1edbn th\u00ec ch\u1eef c\u00e0ng to) v\u00e0 color th\u1ec3 hi\u1ec7n cho m\u00e0u s\u1eafc c\u1ee7a ch\u1eef, #000000 l\u00e0 m\u00e0u \u0111en, #FF0000 l\u00e0 m\u00e0u \u0111\u1ecf, #FFFF00 l\u00e0 m\u00e0u v\u00e0ng.<\/p>\n

TAG <br> cho ph\u00e9p b\u1ea1n chuy\u1ec3n sang d\u00f2ng m\u1edbi. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng nhi\u1ec1u <br> nh\u01b0 b\u1ea1n mu\u1ed1n. C\u1ee9 m\u1ed7i l\u1ea7n c\u00f3 <br> l\u00e0 m\u1ed9t l\u1ea7n xu\u1ed1ng d\u00f2ng. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng mouse ph\u1ea3i g\u00f5 v\u00e0o n\u1ec1n c\u1ee7a m\u1ed9t trang web n\u00e0o \u0111\u00f3 r\u1ed3i ch\u1ecdn source code \u0111\u1ec3 tham kh\u1ea3o xem n\u00f3 \u0111\u01b0\u1ee3c vi\u1ebft nh\u01b0 th\u1ebf n\u00e0o.<\/p>\n

M\u1ed9t trang web bao gi\u1edd c\u0169ng c\u00f3 hai ph\u1ea7n c\u01a1 b\u1ea3n l\u00e0 ti\u00eau \u0111\u1ec1 v\u00e0 ph\u1ea7n th\u00e2n. Ti\u00eau \u0111\u1ec1 lu\u00f4n \u0111\u01b0\u1ee3c vi\u1ebft to. B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng size l\u1edbn h\u01a1n v\u00e0 c\u0169ng c\u00f3 th\u1ec3 d\u00f9ng nh\u1eefng TAG \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh s\u1eb5n cho ti\u00eau \u0111\u1ec1.<\/p>\n

Code:<\/p>\n

<html><\/p>\n

<body bgcolor=”#000080″><\/p>\n

<center><\/p>\n

<font face=”Verdana, Tahoma, Arial” color=”#ffffff”><\/p>\n

<h1>Ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/h1><br><\/p>\n

<h2>Welcome to my Homepage!<\/h2><br><\/p>\n

<h3>Ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/h3><br><\/p>\n

<h4>Ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/h4><br><\/p>\n

<h5>Ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/h5><br><\/p>\n

<h6>Ti\u00eau \u0111\u1ec1 c\u1ee7a trang web<\/h6><br><\/p>\n

<\/font><\/p>\n

<\/center><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

<h1><\/h1> l\u00e0 to nh\u1ea5t v\u00e0 <h6><\/h6> l\u00e0 nh\u1ecf nh\u1ea5t. Ti\u00eau \u0111\u1ec1 lu\u00f4n n\u1eb1m \u1edf trung t\u00e2m c\u1ee7a trang, v\u00ec v\u1eady ta ph\u1ea3i d\u00f9ng th\u00eam m\u1ed9t c\u1eb7p TAG n\u1eefa : <center><\/center> T\u1ea5t c\u1ea3 nh\u1eefng g\u00ec n\u1eb1m gi\u1eefa c\u1eb7p TAG n\u00e0y \u0111\u1ec1u \u0111\u01b0\u1ee3c \u0111\u1ecbnh h\u01b0\u1edbng v\u00e0o ph\u00eda gi\u1eefa c\u1ee7a trang.<\/p>\n

Trong v\u00ed d\u1ee5 n\u00e0y, n\u1ec1n c\u1ee7a trang l\u00e0 xanh n\u01b0\u1edbc bi\u1ec3n (#000080) ch\u1eef m\u00e0u tr\u1eafng.<\/p>\n

B\u1ed5 sung Thi\u1ebft k\u1ebf website html:<\/h2>\n

Trong m\u1ed9t HTML Document, ngo\u00e0i ph\u1ea7n body c\u00f2n c\u00f3 ph\u1ea7n head, \u0111\u01b0\u1ee3c vi\u1ebft b\u1edfi c\u1eb7p tag <head><\/head>. N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng c\u1eb7p tag n\u00e0y, b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i vi\u1ebft th\u00eam m\u1ed9t c\u1eb7p tag n\u1eefa, \u0111\u00f3 l\u00e0 <title><\/title> Gi\u1eefa <title> v\u00e0 <\/title> l\u00e0 t\u00ean c\u1ee7a trang web \u0111\u01b0\u1ee3c browser tr\u00ecnh b\u00e0y ph\u00eda tr\u00ean c\u00f9ng c\u1ee7a menubar. Nh\u01b0 v\u1eady m\u1ed9t trang web v\u1edbi \u201c\u0111\u1ea7u\u201d s\u1ebd c\u00f3 c\u1ea5u tr\u00fac nh\u01b0 sau:<\/p>\n

Code:<\/p>\n

<html><\/p>\n

<head><\/p>\n

<title>Trang web dau tien cua toi<\/title><\/p>\n

<\/head><\/p>\n

<body><\/p>\n

Ph\u1ea7n b\u1ea1n c\u1ea7n tr\u00ecnh b\u00e0y. V\u00ed d\u1ee5 m\u1ed9t b\u1ee9c \u1ea3nh hay l\u1eddi v\u0103n.<\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

Trong \u201chead\u201d ta c\u00f2n c\u00f3 th\u1ec3 \u0111\u01b0a r\u1ea5t nhi\u1ec1u th\u00f4ng tin v\u00e0o cho browser, search engine\u2026 C\u00e1i \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp \u0111\u1ebfn trong m\u1ed9t m\u1ee5c ri\u00eang<\/p>\n

C\u00e1ch \u0111\u01b0a tranh \u1ea3nh v\u00e0o m\u1ed9t trang web.<\/h2>\n

C\u00f3 nh\u1eefng trang web li\u00ean quan \u0111\u1ebfn s\u1ed1 li\u1ec7u, \u0111\u1ed3 th\u1ecb v\u00e0 \u0111\u1ed3 th\u1ecb c\u0169ng l\u00e0 m\u1ed9t d\u1ea1ng \u1ea3nh (images). Sau \u0111\u00e2y l\u00e0 c\u00e1ch \u0111\u01b0a m\u1ed9t b\u1ee9c \u1ea3nh v\u00e0o trong trang web.<\/p>\n

\u1ea2nh cho v\u00e0o trang web n\u00ean save d\u01b0\u1edbi d\u1ea1ng .GIF ho\u1eb7c .JPG<\/p>\n

Kh\u00f4ng n\u00ean to qu\u00e1, \u0111\u00e2y kh\u00f4ng n\u00f3i \u0111\u1ebfn k\u00edch th\u01b0\u1edbc (cm) m\u00e0 n\u00f3i \u0111\u1ebfn k\u00ednh c\u1ee1 file (s\u1ed1 KB).<\/p>\n

Khi scan, b\u1ea1n h\u00e3y ch\u1ecdn 72 dpi (dots per inch) b\u1edfi v\u00ec \u0111a ph\u1ea7n c\u00e1c m\u00e0n h\u00ecnh m\u00e1y t\u00ednh l\u00e0m vi\u1ec7c v\u1edbi \u0111\u1ed9 ph\u00e2n gi\u1ea3i n\u00e0y.<\/p>\n

Khi upload trang web, nh\u1edb upload c\u1ea3 \u1ea3nh.<\/p>\n

T\u00ean c\u1ee7a c\u00e1c file n\u00ean s\u1eed d\u1ee5ng ch\u1eef th\u01b0\u1eddng, kh\u00f4ng n\u00ean s\u1eed d\u1ee5ng ch\u1eef hoa. V\u00ed d\u1ee5: myphoto.jpg ch\u1ee9 kh\u00f4ng Myphoto.jpg.<\/p>\n

Sau \u0111\u00e2y l\u00e0 HTML Code \u0111\u1ec3 \u0111\u01b0a h\u00ecnh \u1ea3nh v\u00e0o trang web:<\/p>\n

Code:<\/p>\n

<html><\/p>\n

<body bgcolor=”#ffffff”><\/p>\n

<center><\/p>\n

<img src=”myphoto.jpg” width=”200″ height=”400″ border=”0″ alt=”Here is my first photo”><\/p>\n

<\/center><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

Ch\u1ec9 ri\u00eang <img src=\u201dmyphoto.jpg\u201d> \u0111\u00e3 \u0111\u1ee7 \u0111\u1ec3 \u0111\u01b0a m\u1ed9t b\u1ee9c \u1ea3nh v\u00e0o trang web. img l\u00e0 image v\u00e0 src l\u00e0 source. T\u1ea5t c\u1ea3 nh\u1eefng c\u00e1i \u0111i \u0111\u1eb1ng sau ch\u1ec9 \u0111\u1ec3 tr\u00ecnh b\u00e0y b\u1ee9c \u1ea3nh \u0111\u00f3 \u0111\u1eb9p h\u01a1n th\u00f4i. width l\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a b\u1ee9c \u1ea3nh m\u00e0 b\u1ea1n mu\u1ed1n. N\u00f3 kh\u00f4ng ph\u1ee5 thu\u1ed9c v\u00e0o k\u00edch th\u01b0\u1edbc g\u1ed1c c\u1ee7a b\u1ee9c \u1ea3nh. height l\u00e0 chi\u1ec1u cao. T\u1ea5t c\u1ea3 \u0111\u1ec1u \u0111o b\u1eb1ng pixel. border=\u201d0\u2033 b\u00e1o cho Browser bi\u1ebft l\u00e0 \u1ea3nh n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c tr\u00ecnh b\u00e0y kh\u00f4ng c\u00f3 khung. alt c\u00f3 \u00edch khi \u1ea3nh ch\u01b0a ho\u1eb7c kh\u00f4ng \u0111\u01b0\u1ee3c n\u1ea1p. Khi \u0111\u00f3 ng\u01b0\u1eddi xem bi\u1ebft \u0111\u01b0\u1ee3c m\u00ecnh s\u1ebd \u0111\u01b0\u1ee3c xem c\u00e1i g\u00ec.<\/p>\n

D\u00f9ng tranh \u1ea3nh l\u00e0m n\u1ec1n cho trang web.<\/h2>\n

B\u1eb1ng c\u00e1ch thay \u0111\u1ed5i th\u00f4ng s\u1ed1 c\u1ee7a bgcolor, b\u1ea1n s\u1ebd t\u1ea1o \u0111\u01b0\u1ee3c m\u00e0u n\u1ec1n kh\u00e1c tu\u1ef3 theo s\u1edf th\u00edch c\u1ee7a m\u00ecnh. Nh\u01b0 b\u1ea1n ch\u1eafc c\u0169ng \u0111\u00e3 th\u1ea5y trong c\u00e1c website \u0111\u00e3 \u0111\u1ebfn th\u0103m, m\u1ed9t trang web c\u00f2n c\u00f3 th\u1ec3 c\u00f3 n\u1ec1n r\u1ea5t \u0111\u1eb9p, t\u1ea1o ra t\u1eeb nh\u1eefng b\u1ee9c tranh nh\u1ecf. HTML Code s\u1ebd nh\u01b0 sau:<\/p>\n

Code:<\/p>\n

<html><\/p>\n

<body bgcolor=”#m\u00e0u m\u00e0 b\u1ea1n th\u00edch” background=”back.jpg”><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

B\u1ea1n th\u1ea5y \u0111\u00f3, \u1edf \u0111\u00e2y ch\u1ec9 c\u00f3 m\u1ed9t s\u1ef1 kh\u00e1c bi\u1ec7t r\u1ea5t nh\u1ecf: ta th\u00eam background v\u00e0o v\u00e0 nh\u1eadn \u0111\u01b0\u1ee3c n\u1ec1n l\u00e0 back.jpg. T\u00f9y theo k\u00edch c\u1ee1 c\u1ee7a back.jpg m\u00e0 n\u1ec1n tr\u00f4ng kh\u00e1c nhau. back.jpg s\u1ebd \u0111\u01b0\u1ee3c gh\u00e9p v\u00e0o v\u1edbi nhau n\u1ebfu nh\u01b0 c\u1ee1 c\u1ee7a n\u00f3 nh\u1ecf h\u01a1n window c\u1ee7a Browser.<\/p>\n","protected":false},"excerpt":{"rendered":"

Thi\u1ebft k\u1ebf website html nh\u01b0 th\u1ebf n\u00e0o? T\u00ecm hi\u1ec3u c\u1ea5u tr\u00fac c\u01a1 b\u1ea3n c\u1ee7a m\u1ed9t thi\u1ebft k\u1ebf website. M\u1ed9t document HTML lu\u00f4n b\u1eaft \u0111\u1ea7u b\u1eb1ng <html> v\u00e0 k\u1ebft th\u00fac b\u1eb1ng <\/html> (trong \u0111\u00f3 b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 vi\u1ebft nh\u1ecf ho\u1eb7c vi\u1ebft hoa <html> v\u00e0 <\/html>). Nh\u1edd c\u00f3 c\u1eb7p TAG n\u00e0y m\u00e0 Browser bi\u1eaft \u0111\u01b0\u1ee3c \u0111\u00f3 […]<\/p>\n","protected":false},"author":2,"featured_media":1218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[108],"class_list":["post-1203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thiet-ke-website","tag-thiet-ke-website-html"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/10\/thiet-ke-website-html-nhu-the-nao-2_blzjru.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=1203"}],"version-history":[{"count":2,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1203\/revisions"}],"predecessor-version":[{"id":5931,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1203\/revisions\/5931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/1218"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=1203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=1203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=1203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}