Thiết kế website bài 1

Thiết kế website bài 1

Kết quả: 4.7/5 - (874 phiếu)

Bạn đang muốn quảng bá hình ảnh doanh nghiệp và sản phẩm, dịch vụ với các đối tác trong và ngoài nước? Bạn muốn nâng cao doanh số bán hàng và mở rộng thị trường khách hàng tiềm năng?

Hãy đến với Công ty Thiết kế web truongthinh.info, chúng tôi sẽ giúp bạn đạt được những mục tiêu đã đề ra.

Trường thịnh chuyên cung cấp dịch vụ xây dựng thiết kế WEB chuyên nghiệp cho các công ty, doanh nghiệp ở mọi lĩnh vực: nhà hàng, spa, bất động sản, xuất nhập khẩu, trường học, tư vấn, sản xuất, xây dựng, dịch vụ, thương mại,…với mục đích giới thiệu doanh nghiệp, quảng bá hình ảnh tăng độ nhận diện thương hiệu một cách chuyên nghiệp nhất.

Ngoài ra truongthinh.info cũng chuyên cung cấp các khóa học đào tạo SEO chuẩn google và đào tạo WEB từ cơ bản đến nâng cao.

Sau đây là bài học thiết kế WEBSITE đầu tiên.


1. Các khái niệm về website:

WEBSITE là gì?

WEB là một tập hợp các trang web (web pages) bao gồm văn bản, hình ảnh, video, flash v.v… thường chỉ nằm trong một tên miền (domain name) hoặc tên miền phụ (subdomain). Trang web được lưu trữ (web hosting) trên máy chủ web (web server) có thể truy cập thông qua Internet. cong ty thiet ke website tphcm

WEB đóng vai trò là một văn phòng hay một cửa hàng trên mạng Internet – nơi giới thiệu thông tin về doanh nghiệp, sản phẩm hoặc dịch vụ do doanh nghiệp cung cấp… Có thể coi WEBSITE chính là bộ mặt của doanh nghiệp, là nơi để đón tiếp và giao dịch với các khách hàng, đối tác trên Internet.

WEBSITE có 2 loại: web tĩnh (static website) và web động (Dynamic website)



Thiết kế WEB bài 1



WEB tĩnh: là trang web sử dụng hoàn toàn ngôn ngữ HTML (có đuôi html hoặc htm), sau khi tải trang HTML từ máy chủ xuống, trình duyệt (IE, Firefox, Opera,...) sẽ biên dịch mã và hiển thị nội dung trang web, người dùng hầu như không thể tương tác với trang web.

Web động (Dynamic WebSite): là thuật ngữ được dùng để chỉ những WEB có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triển web.

2. Giới thiệu về HTML:

HTML là gì ?

HTML là ngôn ngữ đánh dấu cho việc mô tả các tài liệu web (trang web).
HTML là viết tắt của Hyper Text Markup Language (Ngôn ngữ Đánh dấu Siêu văn bản)
Ngôn ngữ đánh dấu là một tập hợp các thẻ đánh dấu
Các tài liệu HTML được mô tả bằng các thẻ HTML
Mỗi thẻ HTML mô tả những nội dung khác nhau cty thiết kế web y tế sức khỏe

Nội dung tập tin HTML thường được lưu dưới dạng .html hoặc htm và được gọi là một trang web (web page)

3. Cấu trúc HTML của 1 trang web

Thiết kế WEB bài 1
Chú thích: 

Khai báo DOCTYPE để định nghĩa kiểu tài liệu HTML
Nội dung giữa thẻ <html> và </html> để miêu tả về trang HTML
Nội dung giữa thẻ <head> và </head> là tập hợp thông tin chung về trang web
Nội dung giữa thẻ <title> và </title> là tiêu đề của trang web
Nội dung giữa thẻ <body> và </body> là phần sẽ được hiển thị trên trang web
Nội dung giữa thẻ <h1> và </h1> là đề mục lớn của trang
Nội dung giữa thẻ <p> và </p>  là một đoạn văn bản trong trang cong ty thiet ke website marketing dep chuan seo gia re

Thẻ trong HTML
Thẻ HTML là các từ khóa (tên thẻ) được bao quanh bởi dấu ngoặc nhọn:
<tên thẻ>nội dung</tên thẻ>
Thẻ HTML thông thường đi theo cặp, ví dụ như <p> và </p>
Thẻ đầu tiên trong cặp thẻ gọi là thẻ mở, thẻ thứ hai gọi là thẻ đóng
Thẻ đóng được viết như thẻ mở nhưng thêm dấu gạch chéo ở trước tên thẻ

ví dụ:
Thẻ html
Cú pháp:  <html>...</html>
Thẻ html là thẻ mở đầu của một trang web
* Thẻ head
Cú pháp: <head>...</head>
Là thẻ chứa các thẻ trong phần đầu của một trang html
* Thẻ title
Cú pháp: <title>...</title>
Thẻ title là thẻ thể hiện tiêu đề của một trang web
* Thẻ meta
Cú pháp: <meta  content="..."  />
Thẻ meta là thẻ mô tả tổng quát về nội dung trang web
* Thẻ link
Cú pháp: <link href='...' />
Là thẻ dùng để nhúng một file bất kỳ vào trang web
* Thẻ script
Cú pháp: <script src="/..."></script>
Thẻ script dùng để nhúng các tập tin JavaScript vào một trang web
* Thẻ style
Cú pháp: <style></style> 
Sử dụng: Dùng để bao quanh nội dung của css
* Thẻ body
Cú pháp: <body></body>  cty thiet ke website trang tri chuan seo
Thẻ body là thẻ vô cùng quan trong. Nó được là thẻ chứa nội dung chính của toàn WEBSITE

4. Tạo trang web đầu tiên

ví dụ ta có đoạn code sau:

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang</title>
</head>
 
<body>
<h1>Đây là đề mục lớn</h1>
<p>Đây là một đoạn văn bản.</p>
</body>
 
</html>

Copy dòng code bên trên và paste vào Dreamweaver hoặc các phần mềm khác và nhấn F12. cty thiết kế website bán Thời Trang

 

Thiết kế WEB bài 1

Thật dễ dàng đúng không nào.

5. Các tag HTML phổ biến

* Thẻ tiêu đề (h1- h6)
Cú pháp:

                    <h1> Nội dung </h1>
                    <h2> Nội dung </h2>
                    <h3> Nội dung </h3>
                    <h4> Nội dung </h4>
                    <h5> Nội dung </h5>
                    <h6> Nội dung </h6>

Sử dụng:
+ Là thẻ thường được sử dụng để thể hiện tiêu đề bài trên một trang web. Có font chữ giảm dần từ h1 đến h6
* Thẻ liên kết(a) lớp học seo hcm
Cú pháp:    <a href="/">Nội dung</a>
Sử dụng: Thẻ a được sử dụng để thể hiện một liên kết trên một trang web.
Thuộc tính: Thẻ a có nhiều thuộc tính nhưng chúng ta chú ý đến hai thuộc tính quan trọng.
                    + href: Là đường dẫn hay liên kết mà chúng ta muốn kết nối đến
                    + target : Là cách để mở ra một liên kết. Nó có bốn giá trị: _blank( Mở sang cử sổ mới), _parent ( Mở ngay ở của sổ hiện tại), _self và _top.
Vi dụ: <a href="http://google.com.vn">Liên kết tới Google tại đây</a>

* Thẻ danh sách ul,ol
+ Thẻ danh sách ul
Cú pháp:

                     

                    <ul>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                    </ul>                   

+ Thẻ danh sách ol

Cú pháp:

                     

               <ol>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
                              <li>Nội dung</li>
               </ol>                  

* Thẻ img                                
Cú pháp: <img src="/" width="" height="" />
Thẻ img là thẻ đơn, được dùng để thể hiện hình ảnh trên trang web. Thẻ img có 3 thuộc tính quan trọng.
                    + Thuộc tính src: là đường dần tới ảnh cần hiển thị
                    + width: Chiều rộng của ảnh
                    + height: Chiều cao của ảnh
* Thẻ strong
Cú pháp: <strong>...</strong>
Thẻ strong là thẻ html được dùng để in đậm văn bản
* Thẻ i
Cú pháp: <i>...</i>
Thẻ i là thẻ html được dùng để in nghiêng văn bản
* Thẻ u
Cú pháp: <u>...</u>
Thẻ u là thẻ html được dùng để gạch chân văn bản
* Thẻ p
Cú pháp: <p>Nội dung</p>
Thẻ P là thẻ chứa nội dung đoạn văn
Ví dụ: <p>Đây là nội dung trong đoạn văn</p>
* Thẻ <br/>
Cú pháp: <br/>
Thẻ xuống dòng
* Thẻ div
Cú pháp: <div>...</div>
Thẻ này là thẻ thường dùng để chứa nội dung của các phần tử khác, thường sử dụng trong dàn dựng layout web
* Thẻ span
Cú pháp: <span>...</span>


Thẻ chứa nội dung (không xuống hàng khi bắt đầu thẻ mới) mua tài khoản vip diễn đàn
* Thẻ table
Cú pháp:

         <table>
        <tr>
            <td>Nội dung</td>
            ................................     
        </tr>
        <tr>
            <td>Nội dung</td>
                ................................     
        </tr>
    <table>

   Được dùng để tạo bảng
* Thẻ form
Cú pháp:
* Thẻ form
Cú pháp: 
        <form></form>
- Được dùng để tạo form 
- Thẻ form thường đi kèm với nó là những thẻ sau: <label></label>, <input />, <select></select>, <textarea></textarea>
Ngoài các thẻ tag trên thì còn rất nhiều thẻ tag khác đang chờ các bạn tìm hiểu.
6. Cấu trúc layout WEB HTML
Các phần tử Semantic mới trong HTML5
Hiện nay có rất nhiều website vẫn đang thiết kế dựa trên các mã HTML như sau: <div id=”nav”> <div class=”header”> <div id=”footer”> để tạo giao diện có menu điều hướng (nav), đầu trang (header) và cuối trang (footer).
Dưới đây, HTML5 cung cấp các phần tử semantic mới để xác định từng phần khác nhau của một trang web: sửa máy tính giá rẻ
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
     
Thiết kế WEBSITE bài 1
Phần tử<section> trong HTML5
Phần tử <section> xác định một phần có trong tài liệu. nap muc may in tai nha
Dựa theo tài liệu về HTML5 của W3C thì: “Một section là một nhóm các nội dung giống nhau có cùng chủ đề.”
Trang chủ của một trang web có thể được chia thành nhiều phần khác nhau: giới thiệu, nội dung, thông tin liên lạc…
 
WEB là gì, HTML là gì,Cấu trúc HTML , Thẻ trong HTML,tag HTML ,Cấu trúc layout,Các phần tử Semantic mới trong HTML5, thiết kế WEB bài 1

Tin cùng chuyên mục


ALEXA - Có Phải Là 'Khuôn Vàng Thước Ngọc " Cho Website ?

10 lỗi không đáng có khi thiết kế website

7 chiến lược tăng tốc bán hàng online

Làm sao để khách hàng của bạn thường xuyên quay trở lại website?

Tin ngẫu ngẫu nhiên


Công Ty Dịch Vụ Thiết Kế Website Chuyên Nghiệp Nhanh Tại Quận 5

Công Ty Dịch Vụ Thiết Kế Website Chuyên Nghiệp Nhanh Tại Quận 4

Công Ty Dịch Vụ Thiết Kế Website Chuyên Nghiệp Huyện Bình Chánh

Công Ty Dịch Vụ Thiết Kế Website Chuyên Nghiệp Huyện Nhà Bè


backtop
Điện Thoại Công Ty Thiết Kế HCM