day02-webdeveloper-HTML

Day 02 Hand’s on HTML Một số khái niệm HTML nói nơm na học vỡ lịng hay xóa mù HTML góc nhìn người Nguyen Van Nam - 0928351036 01 - Nhận biết thẻ HTML qua số khái niệm hình ảnh thực tế ➔ Phân biệt cú pháp loại thẻ HTML: hay gọi tag ➔ ➔ Phân biệt cú dùng cắm trong tag HTML: Attributes, Event Phân loại category HTML ◆ ◆ ◆ ◆ ◆ ◆ Tags Structures Characters Attributes Head OpenGraph Tags - Hầu hết thẻ HTML có cặp thẻ có mở thẻ đóng thẻ có cú pháp sau: inner text inner text Page title Subheading Tertiary heading Quaternary heading - Ngồi có số thẻ đặc biệt khơng cần thẻ đóng hay viết short thẻ , thẻ số thẻ bạn bắt gặp làm việc với số framework Frontend JS Tags - Một số ví dụ tag thực tế Bạn gặp nhiều loại thẻ trình làm việc Structures Là tập hợp thẻ dùng để mô tả cho loại liệu có cấu trúc như: ● ● ● ● bảng biểu giống excel, danh sách có thứ tự Ordered list:

danh sách khơng có thứ tự Unordered list

Form nhập, thường dùng form đăng nhập này, form đăng ký này, form nghiệp vụ Characters - Là nhóm kí tự đặc biệt decodeHTML để chèn đoạn HTML xem thêm link đây: https://textfancy.com/characters/ Attributes - Cú pháp chung sau - Mục đích để - Định nghĩa thêm thuộc tính cho thẻ classname, idName nói tới học CSS Thêm event tương tác hover, click, nói đến học JS Head / OpenGraph - Giống phần mở trang website, có ích cho cơng cụ tìm kiếm google, Bing, Yahoo Một số open graph mở rộng thêm cho facebook, twitch, linkedin số mạng xã hội khác Các loại thẻ khác - https://htmlcheatsheet.com ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● Color picker – Choose a color in the input field to get its Hex and RGB code and a code snippet to use for styling Characters – Retreive the most common character codes or look around in the full list of thousands of characters organized in categories Tags – The most common HTML tags presented with examples Structures – Block of codes consisting of more tags which are always used together: table, list, definition list and form Attributes – HTML tag attributes provide additional information about the elements Gibberish text – Lorem ipsum and other filler text generator to fill pages with content Iframe generator – Set the URL to be accessed, the dimmensions and other attributes to get the iframe HTML code Table generator – Specify the dimmensions of the grid and other attributes to generate the HTML table Link generator – Create an anchor tag setting where to point, what text and tooltip to display You can optionally set it to open the link in new tab Image generator – Create an HTML image tag, setting the link to the image and some style properties List generator – HTML list generator creates a demo list containing two items, based on the selected list type .htaccess – The most common htaccess codes to force https, for redirect, for link rewrite and blocking IP addresses Robots.txt – Small robots text file example to allow or ban web crawlers on your website Head tags – Make sure you don't miss anything important from the head section of the website Open graph – Complete the head section with the Open Graph protocol to help social media sites understand the page HTML5 page structure – A demo page built using the HTML5 elements Bài Test củng cố kiến thức HTML - https://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML Thanks YOU! Vui lòng để lại nhận xét để góp ý cho slide tốt nhé! cám ơn bạn nhiều