Tổng quan về lập trình frontend bằng ngôn ngữ html. Các thẻ cơ bản trong lập trình giao diện web với html. Làm quen với ngôn ngữ html, bước đầu tạo các trang web đơn giản với html. Các thuộc tính cơ bản của thẻ trong html.
Trang 1Các cặp thẻ cơ bản:
<body></body>: nội dung trang web
• Bgcolor=”” : màu nền của trang
• Background=”đường dẫn” : ảnh nền
<br> “xuống dòng
<p align=””> </p>: phân cách các đoạn văn bản
<hr> : vẽ đường kẻ ngang
• Size=”pixel” :độ dày
• Width=”% màn hình” : dài
• Color=”” :màu
• Align=”” : vị trí
<ul></ul> : danh sách k có đánh số thứ tự
<ol></ol> :danh sách tự động đánh thứ tự
<pre></pre>: hiện thị đoạn văn bản có vị trí các chứ giống như đã viết trong code
<pre>
Cộng hoà xã hội chủ nghĩa Việt Nam Độc lập Tự do Hạnh phúc
</pre>
Kiểu chữ:
• <b></b>: in đậm
• <i></i>:in nghiêng
• <u></u>:gạch chân
• <s></s>:gạch ngang
• <sub></sub>:hiện cao hơn giống như số mũ
• <sup></sup>: chỉ số(ngược với số mũ)
<font></font>
• Face=””:kiểu chữ
• Size=”1-7”:cỡ
• Color=””: màu
Các cặp thẻ từ <h1></h1> đến <h6></h6>: in đậm và giảm dần kích thước
• Align=””:vị trí
<center></center>: đưa 1 đoạn vào trung tâm
<blink></blink>: nhấp nháy đoạn văn bản
<marquee></marquee>: khung di chuyễn chữ
• Bgcolor: màu nền của khung
• Width:độ rộng của khung
Trang 2• Hight:độ dày
• Behavior(scoll, alternate): cách di chuyển
• Direction(left, right, down, up):hướng chuyển động
• Hspace(pixel): cách đều các phần bên trái và bên phải
• Vspace(pixel): cách đều các phần bên trên và bên dưới
Liên Kết trong html
<a> Tên văn bản hiển thị </a>
• Href=””: link muốn chuyển đến khi click vào văn bản
• Target=””(_blank:mở trong trang mới, )
• Title=”” :hiện thị mô tả khi rê chuột vào
• <a name=”top”> đầu trang </a>
• <a href=”#top”> trở về đầu trang </a>
• Khi click vào trở về đầu trang thì trang web tự động nhảy về vị trí của đoạn đầu trang có tên đánh dấu là top
• Có thể dung để đánh dấu ngoại trang(điểm dánh dấu và link nằm ở 2 trang khác nhau)
<a href=”tên trang chứa điểm đánh dấu#tên điểm đánh dấu”> đoạn đánh dấu
</a>
Đưa hình ảnh vào trang html:
<img></img>
• Src=”đường dẫn” giống background trong thẻ <body>
• Width(pixel):độ rộng của ảnh vd: width=300px
• Hight(pixel):chiều cao của ảnh
• Alt: đoạn text mô tả cho bức ảnh(chỉ hiển thị khi bức ảnh bị xoá hoặc chưa tải đc ảnh do mạng yếu…)
• Boder(pixel):đường viền bao quanh cho bức ảnh(màu mặc định là màu đen)
• Align=”left, right” k có center cho ảnh trong html(khi sử dụng thuộc tính align thì nếu có nội dung phía sau bức ảnh, nó sẽ tràn lên trên vàu lấp đầy khoảng trống mà bức ảnh để lại ở góc trái hoặc góc phải của màn hình Còn khi k sử dụng thì nó sẽ nằm ở hàng cuối và nhảy xuống phía dưới nếu vẫn còn chữ)
• Hspace(pixel):khoảng cách giữa ảnh và các đối tượng ở hai bên
• Vspace(pixel): khoảng cách giữa ảnh và các đối tượng ở trên dưới Tạo bảng:
<table border=pixel(độ rộng đường viền của bảng) bordercolor(màu của đường viền) width(:độ rộng của bảng) height(: độ cao của bảng) align(left, right, center: vị trí của bảng) bgcolor(màu nền của bảng) background=đường dẫn(ảnh nền của bảng) cellpaddig(pixel, khoảnh cách giữa các đường viền với nội dung trong từng ô) cellspacing(pixel, khoảng cách giữa các ô)>
<tr height(độ cao của dòng) bgcolor(màu nền của dòng) align(left, right, center, justify(căn đều 2 cạnh đối với đoạn văn bản)) valign(middle, top, bottom) background(ảnh nền cho dòng)> :tạo 1 dòng
Trang 3<td gồm các thuộc tính giống dòng></td> :tạo 1 cột trong dòng
</tr>
</table>
Dung colspan và rowspan đển gộp các cột hoặc các hàng
Làm việc với form:
Khoi tạo Form: <form> </form>
• Name: ten form
• Action=”abc.html” hướng dữ liệu đến 1 trang html nào đó
• Method=”” cách gửi dữ liệu Các đối tượng trong form:
• <input>
o Type=”text”, password, checkbox, radio, file(upload dữ liệu), button, reset(làm mới form)
o Name=”” ten đối tượng(name của các radio phải giống nhau)
o Value=”” giá trị khởi tạo của đối tượng
o Size= kích thước
• <Select></select>: giống combobox
o <option> ten </option> : them đối tượng vào selectbox
Selected=”select”: mac dinh chon
• <textarea></textarea>
o Cols=”số dòng” độ rộng
o Rows=”” độ cao
CSS:
<stype type=”text/css”>
</stype>
Phông chữ:
Font-size:?px;
Font-family:”” kiểu chữ Font-weight:độ đậm Font-stype:italic
Đoạn văn bản:
Letter-spacing:?px khoảng cách giữa các ký tự Word-spacing:?px khoảng cách giữa các chữ
Trang 4Text-indent:?px lùi dòng đầu tiên vào Text-align:left, right, center, justify(căn đều 2 bên) Text-decoration:underline, line-through, overline, blink(chớp mắt), none Text-transform:uppercase, lowercase, capitalize(in hoa các chữ cái đầu tiên), none Border:
Border:width màu style(phải khai báo đủ 3 thuộc tính)
Margin:top right bottom left(khoảng cách với các thứ xung quanh)
Margin: top-bottom right-left Margin:cách đều 4 phía Padding: khoảng cách giữa border với nội dung bên trong
Khai báo giống margin
JS