Hướng dẫn how do i create a simple html5 website? - làm cách nào để tạo một trang web html5 đơn giản?
This tutorial will show you how to Learn how to create a simple Html5 website using Html5 & CSS code from the scratch.
Check out the
demo and download here!
HTML5 is a W3C specification that defines the fifth major revision of the Hypertext
Markup Language [HTML]. One of the major changes in HTML5 is in respect to how HTML addresses Web applications. Other new features in HTML5 include specific functions for embedding graphics, audio, video, and interactive documents. It’s completely open and controlled by a standards committee, of which Apple is a member. HTML5 introduces a number of new attributes, input types, new features, easy option and other elements for your markup toolkit.
Step 1 : This is the simple
design layout that we are going to build using HTML5.
Step 2 : First create the below files and folder
*
index.html [File] – Here we will build the basic html5 website.
* style.css [File] – Where to define styles against any HTML element.
* images [Folder] – Used to store images used in the basic html5 website.
Step 3 : Always ensure to start the Html5 website with before any other HTML code, so that the browser knows what type
of document to expect.
The doctype for HTML5 is very simple than the previous versions of HTML. The tag does not have an end tag.
Step 4 : Hence the skeleton structure of a simple basic Html5 website is
Step 5 : Html5 uses the new sectional and structural semantic elements such as
* [i.e, instead of
]
– Specifies a header for a document or section.* [i.e, instead of
]
– Represents a section of a page that links to other pages or to parts within the page:
a section with navigation links.
* – Used to represent an article that is independent/self-contained content on the site.
* – Represents a generic section of a document. And also a thematic grouping of content, typically with a heading. It can be nested inside sections, articles, or asides.
*
– Represents a section of a page containing not the main content of the page but some content which is indirectly related to the main content.
* [i.e,
to ] – Represents the heading of a section, which consists of all the to element children of the hgroup element. The element indicate subheadings or subtitles.
*
– The ending elements.* – The ‘link tag’ or the ‘hyperlink tag’. This makes text ‘hyper’ so that when we click on it we can load another page or activate/call some JavaScript.
Step 6 : The image below is the outline of the parts of our HTML webpage.
Now define the basic skeleton structure of the HTML webpage using the new structural elements specified in Step 5. Here is a simple example
of some code that uses these elements.
The tag includes all the main page’s structure.
Bước 7: Có cấu trúc thô của tất cả các phần tử trong bố cục HTML, do đó sẽ dễ dàng mã hóa CSS. & NBSP; chúng ta cần bắt đầu với cấu trúc trang cơ bản. Trong trường hợp này, chúng tôi sẽ sử dụng một số nội dung giả để tạo trang web hai cột. Have a rough structure of all the element in the html layout, so that it will be easy to code the css. We need to start with the basic page structure. In this case we will use some dummy content to create the two column website.
Bước 8: Chúng tôi có thể bọc tất cả các thẻ bên trong các bộ phận của thẻ bằng cách sử dụng thẻ Wrapper Wrapper để tập trung vào nội dung trong trình duyệt. & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - được sử dụng để khai báo Charset & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; We can wrap all the tags inside the divisions of the tag using the “wrapper” tag for centering the content in the browser.
– Used to declare the charset
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - Thẻ trình bao bọc & nbsp; bao gồm thẻ div 'NBSP; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - Thẻ chân trang bao gồm thẻ div 'NBSP; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
– The wrapper tag includes the closing ‘content’ div tag
Home About Us Services Contact – The footer tag includes the closing ‘content’ div tag
Bước 9: Hãy bắt đầu kiểu dáng đầu tiên cho trình bao bọc phần tử, tiêu đề và điều hướng trong bộ phận. & NBSP; sau đó cho phần nội dung chính với một bài viết nổi bật với các phần, thanh bên và cuối cùng là một chân trang. Let’s first start styling
for the page element wrapper, header and navigation in the division. Then for the main content section with a featured article with sections, a sidebar and finally a footer.
Bước 10: Các quy tắc CSS được mã hóa và lưu trữ trong một tệp bên ngoài, được đặt tên là Kiểu của Style.css. Và cũng được liên kết với phong cách bên trong thẻ đầu để sử dụng lại mã CSS trên nhiều trang. CSS rules are coded and stored in an external file, named “style.css” separately. And also linked to the style inside the head tag to reuse the CSS code on many pages.
Bước 11: Vỏ bọc đang giữ trang kết hợp. Do đó, chúng tôi có thể bọc và hạn chế chiều rộng trang tổng thể đến 900px và trung tâm của trình duyệt. Nó có một bộ phận vì vậy chúng tôi phải sử dụng biểu tượng của##trước khi mã trong bảng kiểu CSS. The
wrapper is holding the page togather. Hence we can wrap and restrict the overall page width to 900px and center of the browser. It’s a division so we have to use the symbol “#” before the code in the CSS style sheet.
Ngoài ra, luôn luôn nhớ về lợi nhuận của người Viking sẽ bao gồm khoảng cách bên ngoài hộp và các mái chèo của Cameron sẽ bao gồm khoảng cách bên trong hộp.margins” will include the spacing outside the box and “paddings” will include the spacing inside the box.
Lưu ý: Biên độ: 10px 7px 0 tự động; - Ở đây, giá trị đầu tiên là cho phần trên cùng của hộp [tức là 10px], giá trị thứ hai là dành cho phần bên phải của hộp [tức là, 7px], giá trị thứ ba là cho phần dưới cùng của hộp [tức là 0px] và Giá trị thứ tư là cho phần bên trái của hộp [tức là tự động],margin:10px 7px 0 auto; – Here the first value is for the Top portion of the
box[i.e, 10px], second value is for Right portion of the box[i.e, 7px], third value is for the Bottom portion of the box[i.e, 0px] and the fourth value is for the Left portion of the box[i.e, auto],
#Wrapper {màu nền:#333; Phao: kế thừa; Chiều rộng: 900px; Vị trí: tương đối; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;-lề/trái được đặt thành tự động có nghĩa là nội dung sẽ luôn được tập trung bên trong trình duyệt. }
background-color:#333;
float:inherit;
width:900px;
position:relative; – To define the position for some browsers
margin:0
auto 0 auto; – margin-right/left is set to auto meaning the content will always be centered inside the browser.
}
Bước 12: Tiếp theo, chúng tôi đặt chiều cao của khu vực tiêu đề thành 100px và chiều rộng thành 875px. Chiều rộng thực tế của tiêu đề là 900px, nhưng ở đây chúng tôi đã đưa khoảng cách cho hộp thông qua đệm và điều chỉnh không gian đó theo chiều rộng. Tất cả các nội dung & hình ảnh sẽ được căn chỉnh bên trái với float: trái. Next, we set the height of the header area to 100px and width to 875px.The actual width of the header is 900px, but here we have given spacing to the box through padding and adjusted those space in the width. All the content & images will be aligned left with float:left.
tiêu đề {float: trái; Chiều rộng: 875px; Chiều cao: 100px; màu nền:#333; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; -& nbsp; đại diện cho phông chữ màu nền: Arial, Helvetica, sans-serif; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - & nbsp; Đại diện cho kiểu phông chữ phông chữ: bình thường; font-size: 30px; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - & nbsp; đại diện cho phần đệm kích thước phông chữ: 50px 0 5px 25px; màu:#fc0; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; ; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - & nbsp; đại diện cho màu văn bản}
float:left;
width:875px;
height:100px;
background-color:#333; – Represents the background color
font-family:Arial, Helvetica, sans-serif; – Represents the font type
font-style:normal;
font-size:30px; – Represents the font size
padding:50px 0 5px 25px;
color:#FC0;
– Represents the text color
}
Bước 13: Bây giờ chúng ta phải tạo kiểu cho phần còn lại của các yếu tố tương tự như Bước 12, nhưng cấu trúc của các thẻ được thiết lập khác nhau với một số thay đổi vị trí và sắp xếp. Mã CSS mà chúng tôi đã sử dụng cho trang web của chúng tôi dưới đâyNow we have to style the rest of the elements similar to “Step 12” but the structure of the tags is set up differently with some position and arrangement changes. The css code which we have used for our website page is below
nav {float: trái; Chiều rộng: 875px; Chiều cao: 30px; màu nền:#fc0; Phông chữ-gia đình: Tahoma, Geneva, Sans-serif; Phông chữ-Trọng lượng: đậm; kích thước phông chữ: 12px; Màu sắc:#333; Đệm: 17px 0 3px 25px; }
{
float:left;
width:875px;
height:30px;
background-color:#FC0;
font-family:Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size:12px;
color:#333;
padding:17px 0 3px 25px;
}
bài viết {float: trái; Chiều rộng: 650px; màu nền:#333; Phông chữ-gia đình: Arial, Helvetica, Sans-serif; Kiểu phông chữ: Bình thường; kích thước phông chữ: 12px; Độ cao dòng: 21px; Màu sắc: #CCC; Đệm: 25px 25px 5px 25px; }
float:left;
width:650px;
background-color:#333;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
line-height:21px;
color:#CCC;
padding:25px 25px 5px 25px;
}
Bên cạnh {float: trái; Chiều rộng: 170px; màu nền:#666; Phông chữ-gia đình: Arial, Helvetica, Sans-serif; Kiểu phông chữ: Bình thường; kích thước phông chữ: 12px; Màu sắc: #CCC; Đệm: 25px 15px 10px 15px; Độ cao dòng: 16px; & nbsp; -& nbsp; & nbsp; Để tăng khả năng đọc nội dung, bạn có thể tăng độ cao dòng của văn bản lên 16px. }
float:left;
width:170px;
background-color:#666;
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-size:12px;
color:#CCC;
padding:25px 15px 10px 15px;
line-height:16px; – To increase readability of the content, you can increase the overall line-height of text to 16px.
}
#footer {rõ ràng: cả hai; Chiều rộng: 875px; Chiều cao: 30px; màu nền:#fc0; Phông chữ-gia đình: Arial, Helvetica, Sans-serif; Phông chữ-Trọng lượng: Bình thường; kích thước phông chữ: 12px; Màu sắc:#333; Đệm: 20px 0 0 25px; }
{
clear:both;
width:875px;
height:30px;
background-color:#FC0;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
color:#333;
padding:20px 0 0 25px;
}
Các thẻ rõ ràng: cả hai thẻ, hãy đảm bảo rằng chân trang thực sự được hiển thị bên dưới bài viết chính; Nó giải thích cho thấy trình duyệt rằng không có yếu tố nổi nào được phép ở cả hai bên của chân trang.clear:both” tag make sure that the footer actually is displayed below the main article; it explictly tells the browser that no floating elements are allowed on both sides of the footer.
Bước 14: Thẻ Hgroup được chỉ định với loại phông chữ Arial Arial và chiều cao dòng là 21px. Để tăng khả năng đọc, bạn có thể tăng độ cao dòng tổng thể của văn bản lên 21px. The hgroup tag is specified with the font type “Arial” and line height of 21px. To increase readability, you can increase the overall line-height of text to 21px.
H2, H2, H3 {Font-Family: Arial, Helvetica, Sans-serif; Độ cao dòng: 21px; }
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
}
Bước 15: 'Thẻ liên kết' hoặc 'Thẻ siêu liên kết' trên Rollover, nó sẽ thay đổi màu sắc hoặc kích thước phông chữ, v.v ... Ở đây tôi sẽ thay đổi màu của văn bản điều hướng/siêu liên kết trong Rollover và xác định trang trí văn bản với gạch chân. Mã có thể được nhìn thấy bên dưới The ‘link tag’ or the ‘hyperlink tag’ on rollover it should change the color or font size, etc. Here I am going to change the color of the navigation/hyperlink text in rollover and define the text-decoration with underline. The code can be seen below
nav a {màu:#000; Chế độ trang trí văn bản: Không có; }
color:#000;
text-decoration:none;
}
Nav A: Hover {Color:#919191; Chế độ trang trí văn bản: gạch chân; }
color:#919191;
text-decoration:underline;
}
a {màu:#fc0; Chế độ trang trí văn bản: Không có; }
color:#FC0;
text-decoration:none;
}
A: Hover {trang trí văn bản: gạch chân; }
text-decoration:underline;
}
Bước 16: Chúng ta có thể thêm các thuộc tính lớp và ID vào các thẻ. Vì vậy, nếu bạn muốn tạo kiểu riêng một phần, thì chỉ cần thêm một lớp hoặc ID vào thẻ và bạn có thể áp dụng kiểu cho nó. Tôi đã xác định một lớp cho các hình ảnh [tức là,] là thể hiện hình ảnh trong 3 hàng và 2 cột. Tôi đã mã hóa các CSS như dưới đây We can add class and ID attributes to the tags. So, if you wanted to style a
section separately, then simply add a class or ID to the tag and you can apply the style for that. I have defined a class for the images[i.e, ] which is to represent the images in 3 rows and 2 columns. I have coded the css as below
.t_images {float: trái; Chiều rộng: 155px; biên giới: 1px rắn #999; & nbsp; - & nbsp; Thêm một đường viền mỏng với màu #999 vào Div. Biên độ: 0 15px 25px 15px; Padding: 5px; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; - & nbsp; Đường viền của hình ảnh được thêm vào với đệm 5px và để di chuyển nó ra khỏi hình ảnh. }
{
float: left;
width: 155px;
border: 1px solid #999; – Add a thin border with the color #999
to the div.
margin: 0 15px 25px 15px;
padding: 5px; – The border of the image is added with 5px padding and to move it away from the images.
}
Bước 17: Đó là nó! Vì vậy, đây là những gì chúng tôi đã tạo ra trang HTML5 trông giống như bây giờ. That’s it! so here’s what we have created the html5 page looks like now.
Bước 18: & NBSP; Kiểm tra bản demo và tải xuống tại đây! Check out the
demo and download here!
Hy vọng bạn đã học cách tạo một trang web HTML5 đơn giản. Hãy chia sẻ suy nghĩ của bạn trong các ý kiến.
Làm thế nào tạo một trang web đơn giản bằng cách sử dụng HTML?
Thực hiện theo các bước bên dưới để tạo trang web đầu tiên của bạn với Notepad hoặc Textedit ...
Bước 1: Mở Notepad [PC] Windows 8 trở lên: ....
Bước 1: Mở Textedit [Mac] Mở Finder> Ứng dụng> Textedit.....
Bước 2: Viết một số HTML.....
Bước 3: Lưu trang HTML.....
Bước 4: Xem trang HTML trong trình duyệt của bạn ..
Tôi có thể xây dựng trang web của riêng mình bằng HTML không?
HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang web và CSS là ngôn ngữ mô tả phong cách của một tài liệu HTML. and CSS is the language that describes the style of an HTML document.
Làm thế nào tôi có thể tự tạo trang web của riêng mình?
Xác định tin nhắn của bạn.Đầu tiên và quan trọng nhất, hãy tự hỏi tại sao bạn đang tạo một trang web cá nhân.....
Tìm kiếm cảm hứng.Trước khi tạo trang web cá nhân của bạn, hãy duyệt web để lấy cảm hứng.....
Chọn một mẫu.....
Thêm nội dung của riêng bạn.....
Tùy chỉnh thiết kế của bạn.....
Hãy chắc chắn rằng bạn thân thiện với thiết bị di động.....
Tối ưu hóa cho SEO.....
Nhận ý kiến thứ hai ..