Cách tạo phần nội dung trang chủ của bạn bằng HTML
Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.
Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.
Trong hướng dẫn này, ta sẽ tạo lại phần thân hoặc phần giữa của trang web trình diễn của ta bằng cách sử dụng các phần tử HTML <div> và các thuộc tính style HTML.
Phần giữa của trang web trình diễn của ta chứa một hình ảnh profile lớn và một đoạn văn bản ngắn được hiển thị cạnh nhau. Ta có thể đạt được bố cục này bằng cách sử dụng các containers <div> mà ta đã học trong phần hướng dẫn trước của loạt bài này. Lưu ý nếu bạn tiếp tục học các kỹ năng giao diện user , chẳng hạn như CSS, có những phương pháp được cải thiện để sắp xếp nội dung trên trang web dựa trên các phương pháp mà ta sẽ sử dụng trong hướng dẫn này.
Cách thêm hình ảnh profile lớn vào trang web
Đầu tiên, ta sẽ thêm một hình ảnh profile lớn như trong trang web trình diễn. Trước khi ta bắt đầu, hãy đảm bảo bạn đã chọn một hình ảnh profile lớn hoặc hình ảnh khác để sử dụng. Ta sẽ hiển thị hình ảnh của bạn ở 400 x 600 pixel, vì vậy hãy đảm bảo kích thước hình ảnh của bạn sẽ hoạt động với những kích thước đó. Nếu bạn chưa có hình ảnh, bạn có thể tải hình ảnh xuống từ trang demo của ta . Sau khi bạn có hình ảnh của bạn , hãy lưu nó vào folder hình ảnh của bạn. (Để biết thêm thông tin về cách thêm hình ảnh vào trang web bằng HTML, vui lòng truy cập hướng dẫn Hình ảnh HTML của ta từ phần trước trong loạt bài hướng dẫn này).
Tiếp theo, sao chép đoạn mã sau sau lần đóng cuối cùng </div> và trước thẻ đóng <body> trong file “index.html” của bạn:
... <!--Second section--> <img src="images/large-profile.jpg" style="height:600px; margin:100px; float: left;" alt="A pretend invisible person wearing a hat, glasses, and coat."> ... Hãy tạm dừng một chút để xem xét từng phần của đoạn mã này:
-
<!--Second section-->là comment sẽ không được trình duyệt đọc và được sử dụng để giúp tổ chức filehtmlcủa ta với mục đích con người có thể đọc được - Thẻ
<img>cho trình duyệt biết rằng ta đang chèn một hình ảnh vào trang web. -
src="images/large-profile.jpg"cho trình duyệt biết nơi để tìm hình ảnh đang được hiển thị. - Thuộc tính
stylecho phép ta xác định các thuộc tínhheight,marginvàfloat. Thuộc tínhmargincho phép bạn chỉ định kích thước của khoảng trống xung quanh phần tử HTML. Thuộc tínhfloatcho phép bạn “thả nổi” hình ảnh sang bên phải và bên trái của màn hình trong khi vẫn cho phép văn bản chảy quanh cạnh của nó. - Thuộc tính
altcho phép bạn thêm văn bản thay thế vào hình ảnh của bạn để cải thiện khả năng truy cập trang web cho những khách truy cập sử dụng trình đọc màn hình. Đừng quên thay đổi văn bản thay thế trong đoạn mã này thành mô tả phù hợp với hình ảnh của bạn.
Lưu file “index.html” của bạn và reload trong trình duyệt. Phần bên dưới phần trên cùng của trang web bây giờ sẽ trông giống như sau:
Nếu bạn có lỗi, hãy kiểm tra đảm bảo rằng bạn đã thêm tất cả mã HTML vào đúng khu vực của index.html và hình ảnh của bạn nằm trong đường dẫn file mà bạn đã chỉ định với thuộc tính src .
Cách thêm phần “Giới thiệu về tôi” vào trang web
Tiếp theo, ta sẽ thêm một đoạn văn bản vào bên phải của hình ảnh. Hãy thay thế văn bản giả trong ví dụ này bằng text bạn chọn.
Ta sẽ tạo phần văn bản này bằng cách tạo containers <div> và chèn nội dung văn bản vào bên trong.
Trong file “index.html” của bạn, hãy thêm đoạn mã sau vào sau hình ảnh bạn đã thêm ở bước trên và trước thẻ đóng </body> :
... <div style="height:600px; margin:100px;"> <h1>Hello </h1> <p style="line-height: 2.0; font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et magnis dis parturient montes nascetur ridiculus mus. Purus semper eget duis at tellus at urna condimentum mattis. Turpis in eu mi bibendum neque egestas. Rhoncus dolor purus non enim praesent elementum facilisis. Ipsum nunc aliquet bibendum enim facilisis gravida. Cursus turpis sa tincidunt dui ut ornare lectus. Enim nec dui nunc mattis enim ut. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Tussa ultricies mi quis hendrerit dolor magna. Elit eget gravida cum sociis natoque penatibus et magnis dis. Enim tortor at auctor urna nunc id cursus metus.</p> <p style="line-height: 2.0; font-size:20px;">Email me at <a href="mailto:Sammy@SampleEmail.com">Sammy@SampleEmail.com </a></p> </div> Hãy tạm dừng một chút để xem xét từng phần của đoạn mã này:
- Phần tử
<div style="height:600px; margin:100px;">tạo vùng chứa<div>cóheight600 pixel vàmargin100 pixel. - Phần tử
<h1>thêm tiêu đề văn bản vào nội dung của ta . - Hai
<p style="line-height: 2.0; font-size:20px;">tạo ra hai đoạn văn có chiều cao dòng được mở rộng thành 2.0 và phông chữ là 20 pixel. - '<a href=p> mailto: Sammy@SampleEmail.com '> Sammy@SampleEmail.com </a> `thêm một liên kết email vào địa chỉ email.
- Thẻ đóng
</div>đóng containers<div>của ta .
Lưu file “index.html” của bạn và reload trong trình duyệt. Phần bên dưới phần trên cùng của trang web bây giờ sẽ trông giống như sau:
Hình ảnh và văn bản của bạn bây giờ sẽ được hiển thị như trong trang web trình diễn. Bạn có thể điều chỉnh các thuộc tính kiểu trong các đoạn mã để thay đổi chiều cao, lề, cỡ chữ hoặc các thuộc tính kiểu khác cho nội dung của bạn.
Lưu ý nếu khung nhìn trình duyệt của bạn bị thu hẹp nhiều, văn bản của bạn cuối cùng sẽ tràn vào các phần tử khác trên trang web . Để tạo bố cục đáp ứng với nhiều loại thiết bị, bạn cần học thêm các kỹ năng giao diện user như CSS (loạt bài hướng dẫn sắp ra mắt) và Flexbox .
Đến đây bạn cần phải có một sự hiểu biết về cách sắp xếp hình ảnh và văn bản bên cạnh sử dụng <div> container, các style thuộc tính, và các thuộc tính phong cách. Trong hướng dẫn tiếp theo và cuối cùng của loạt bài này, ta sẽ tìm hiểu cách tạo chân trang trang web bằng phần tử HTML <footer> .
Các tin liên quan
Cách thêm image vào trang web của bạn bằng HTML2020-09-15
Sử dụng ExpressJS để phân phối tệp HTML
2020-09-15
Cách thêm image vào trang web của bạn bằng HTML
2020-09-15
Cách thêm hình nền vào phần trên cùng của trang web bằng HTML
2020-09-14
Cách Căn giữa hoặc Căn chỉnh Văn bản và image trên Trang web của Bạn bằng HTML
2020-09-14
Cách thêm image profile theo kiểu vào trang web của bạn bằng HTML
2020-09-14
Cách thêm HTML Thành phần cho trang web của bạn
2020-09-14
Cách tạo và liên kết đến các trang web bổ sung bằng HTML
2020-09-14
Cách thêm và tạo kiểu tiêu đề cho trang web của bạn bằng HTML
2020-09-14
Cách thiết lập dự án trang web HTML của bạn
2020-09-14
