The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.
This document provides an introduction to JavaScript and the Document Object Model (DOM). It discusses what JavaScript is, how it can be implemented into web pages, its syntax, data types, functions, and how it interacts with the DOM. JavaScript allows dynamic behavior and interactivity on web pages by accessing and modifying elements and properties of the DOM tree.
Este documento explica como fazer upload de arquivos no Laravel utilizando a classe Request. Ele discute as configurações de upload no arquivo filesystems.php, como recuperar arquivos do formulário de upload, salvar os arquivos no storage, e exibi-los na view.
1. CSS (Cascading Style Sheets) is a language used to define the style and layout of web pages. CSS can be applied internally, inline, or through external style sheets.
2. There are different types of CSS selectors including tag selectors, ID selectors, and class selectors that allow styles to be applied to specific HTML elements. Common CSS properties define colors, fonts, spacing, and layout.
3. CSS3 introduces newer specifications like rounded corners, shadows, gradients, transitions, and transformations that expand on the original CSS standards. Features like custom fonts, multi-column layout, flexible box and grid layouts add additional styling capabilities.
O documento discute semântica em HTML, introduzindo tags como header, section, aside e footer para estruturar o conteúdo da página de forma significativa. Também explica a diferença entre div e as novas tags, e como CSS é usado para estilizar a apresentação sem afetar a estrutura do conteúdo.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This document appears to be a slide presentation given by Giuseppe Maxia about MySQL. Some key points made in the presentation include:
- Giuseppe introduces himself and his background with MySQL.
- MySQL is presented as a solution for startups and small businesses due to its low cost, ease of use, and stability.
- MySQL has a large user base powering many major websites and has a business model of offering additional services to larger customers.
- The MySQL community is highlighted as contributing to many open source projects and tools.
การผลิตสื่อดิจิทัล (DIGITAL MEDIA )
สื่อดิจิทัลคืออะไร? DIGITAL REVOLUTION
พรบ.ลิขสิทธิ์และการนำไปใช้เพื่อการศึกษา
ขั้นตอนการผลิตสื่อดิจิทัล ตัวอย่างสื่อชนิดต่างๆ
The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.
This document provides an introduction to JavaScript and the Document Object Model (DOM). It discusses what JavaScript is, how it can be implemented into web pages, its syntax, data types, functions, and how it interacts with the DOM. JavaScript allows dynamic behavior and interactivity on web pages by accessing and modifying elements and properties of the DOM tree.
Este documento explica como fazer upload de arquivos no Laravel utilizando a classe Request. Ele discute as configurações de upload no arquivo filesystems.php, como recuperar arquivos do formulário de upload, salvar os arquivos no storage, e exibi-los na view.
1. CSS (Cascading Style Sheets) is a language used to define the style and layout of web pages. CSS can be applied internally, inline, or through external style sheets.
2. There are different types of CSS selectors including tag selectors, ID selectors, and class selectors that allow styles to be applied to specific HTML elements. Common CSS properties define colors, fonts, spacing, and layout.
3. CSS3 introduces newer specifications like rounded corners, shadows, gradients, transitions, and transformations that expand on the original CSS standards. Features like custom fonts, multi-column layout, flexible box and grid layouts add additional styling capabilities.
O documento discute semântica em HTML, introduzindo tags como header, section, aside e footer para estruturar o conteúdo da página de forma significativa. Também explica a diferença entre div e as novas tags, e como CSS é usado para estilizar a apresentação sem afetar a estrutura do conteúdo.
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
This document appears to be a slide presentation given by Giuseppe Maxia about MySQL. Some key points made in the presentation include:
- Giuseppe introduces himself and his background with MySQL.
- MySQL is presented as a solution for startups and small businesses due to its low cost, ease of use, and stability.
- MySQL has a large user base powering many major websites and has a business model of offering additional services to larger customers.
- The MySQL community is highlighted as contributing to many open source projects and tools.
การผลิตสื่อดิจิทัล (DIGITAL MEDIA )
สื่อดิจิทัลคืออะไร? DIGITAL REVOLUTION
พรบ.ลิขสิทธิ์และการนำไปใช้เพื่อการศึกษา
ขั้นตอนการผลิตสื่อดิจิทัล ตัวอย่างสื่อชนิดต่างๆ
6. HTML & CSS
▪ HTML (hypertext markup language) is the language used to
create webpages.
▪ CSS (cascading style sheets) tells the computer how the
content should be displayed, including layout, fonts, colors,
etc.
เขียนเว็บติดต่อฐานข้อมูล 6
HTML, CSS, PHP, MySQL, Database
9. <!doctype html>
▪ Doctype จะเป็น tag ที่ไว้บอกบราวเซอร์ ว่า เอกสารที่มันกาลังเปิด
อยู่กาหนดมาตรฐานไว้แบบไหน โดยที่ Doctype จะเป็น tag ที่อยู่
ก่อน tag html
▪ HTML 5 Doctype คือ
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 9
<!doctype html>
<html>
</html>
10. <html></html>
▪ The <html> tag tells the browser that this is an HTML
document.
▪ The <html> tag represents the root of an HTML document.
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 10
<!doctype html>
<html>
</html>
11. <head></head>
▪ The <head> element is a container for all the head elements.
▪ The <head> element can include a title for the document,
scripts, styles, meta information, and more.
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 11
<html>
<head>
<title>HTML Study : ฝึกเขียนเว็บด ้วย HTML</title>
</head>
</html>
12. <title></title>
▪ defines a title in the browser toolbar
▪ provides a title for the page when it is added to favorites
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 12
13. <body></body>
▪ The <body> tag defines the document's body.
▪ The <body> element contains all the contents of an HTML
document, such as text, hyperlinks, images, tables, lists, etc.
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 13
<head>
<title>HTML Study : ฝึกเขียนเว็บด ้วย HTML</title>
</head>
<body>
Hello สวัสดี
</body>
21. <a></a>
▪ The <a> tag defines a hyperlink
▪ href - Specifies the URL of the page the link goes to
▪ target - Specifies where to open the linked
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 21
<body>
<p>My Website</p>
<a href="http://www.google.com">go to Google</a>
<a href="https://www.w3schools.com/"
target="_blank">W3Schools!</a>
</body>
23. <img>
▪ The <img> tag defines an image in an HTML page.
▪ The <img> tag has two required attributes: src and alt.
▪ src - Specifies the URL of an image
▪ alt - Specifies an alternate text for an image
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 23
<body>
<h1>Hello สวัสดี</h1>
<p>My Website</p>
<img src="fish.png" alt="Fish">
</body>
27. <ul></ul>
▪ The <ul> tag defines an unordered (bulleted) list.
▪ Use the <ul> tag together with the <li> tag to create
unordered lists.
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 27
<body>
<h1>Hello สวัสดี</h1>
<h3>Normal List</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
</ul>
</body>
29. <ol></ol>
▪ The <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
▪ Use the <li> tag to define list items.
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 29
<body>
<h1>Hello สวัสดี</h1>
<h3>Number List</h3>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
</ol>
</body>
47. margin
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 47
margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px
margin: 25px;
all four margins are 25px
54. <form>
▪ The <form> tag is used to create an HTML form for user input.
▪ <input>
▪ <textarea>
▪ <button>
▪ <select>
▪ <option>
▪ <optgroup>
▪ <fieldset>
▪ <label>
▪ <output>
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 54
55. input type
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 55
button password
checkbox radio
color range
date reset
datetime-local search
email submit
file tel
hidden text
image time
month url
number week
56. Form & input type
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 56
<form>
</form>
input
select
textarea
button
input
text
password
radio
search
email
text
text
date
time
number
color
checkbox
submit reset
75. ตัวอย่างคาที่ห้ามใช้
▪ PHP Keywords (คาสงวน) เช่น (มีเพิ่มเติ่มอีก)
เขียนเว็บติดต่อฐานข้อมูล 75
and false or
break for require
case foreach return
class function static
continue global switch
default if this
do include true
else list var
elseif new virtual
extends not while
HTML, CSS, PHP, MySQL, Database
82. ตัวดาเนินการ (Operator)
▪ ตัวดาเนินการเชิงตรรกะ (Logical Operators)
82
เขียนเว็บติดต่อฐานข้อมูล
Operator Name Example
and และ $x and $y
or หรือ $x or $y
xor Xor $x xor $y
&& และ $x && $y
|| หรือ $x || $y
! นิเสธ !$x
HTML, CSS, PHP, MySQL, Database
83. ตัวดาเนินการเพิ่ม ลดค่า (++ --)
เขียนเว็บติดต่อฐานข้อมูล 83
เครื่องหมาย การคานวณ ตัวอย่าง ความหมาย
++
เพิ่มค่า
ทีละหนึ่ง
++a
เพิ่มค่า a ก่อนแล้ว
นา a ไปใช้งาน
a++
นาค่า a ไปใช้งานก่อน
แล้วเพิ่มค่า a
--
ลดค่า
ทีละหนึ่ง
--a
ลดค่า a ก่อนแล้ว
นา a ไปใช้งาน
a--
นาค่า a ไปใช้งานก่อน
แล้วลดค่า a
HTML, CSS, PHP, MySQL, Database
84. a++ , ++a
เขียนเว็บติดต่อฐานข้อมูล 84
a = 10;
b = ++a;
a = 10;
b = a++;
a = 10
a = a+1 = 11
b = a+1 = 11
a = 10
b = a = 10
a = a+1 = 11
a = 11 , b = 11
a = 11 , b = 10
HTML, CSS, PHP, MySQL, Database
85. a-- , --a
เขียนเว็บติดต่อฐานข้อมูล 85
a = 10;
b = --a;
a = 10;
b = a--;
a = 10
a = a-1 = 9
b = a-1 = 9
a = 10
b = a = 10
a = a-1 = 9
a = 9 , b = 9
a = 9 , b = 10
HTML, CSS, PHP, MySQL, Database
154. SQL standard data types
▪ String (text)
▪ Numeric
▪ DATETIME
▪ DATE
▪ TIMESTAMP
(เพิ่มเติม)
▪ https://dev.mysql.com/doc/refman/8.0/en/data-types.html
▪ https://www.w3resource.com/mysql/mysql-data-types.php
เขียนเว็บติดต่อฐานข้อมูล 154
HTML, CSS, PHP, MySQL, Database
155. String
▪ ตัวหนังสือ(character) เช่น
▪ CHAR (0 to 255)
▪ VARCHAR (0 to 255 or 0 to 65,535)
▪ TEXT
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 155
156. Numeric
▪ จานวนเต็ม INTEGER (or INT)
▪ ข้อควรระวัง ข้อมูลที่มีจุดทศนิยมได้ไม่ควรใช้ INT เช่น เงินเดือน
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 156
Type Length in Bytes Minimum Value
(Signed)
Maximum Value
(Signed)
Minimum
Value
(Unsigned)
Maximum Value
(Unsigned)
TINYINT 1 -128 127 0 255
SMALLINT 2 -32768 32767 0 65535
MEDIUMINT 3 -8388608 8388607 to 0 16777215
INT 4 -2147483648 2147483647 0 4294967295
BIGINT 8 -9223372036854775808 9223372036854775807 0 18446744073709551615
157. Numeric
▪ จานวนจริง มีจุดทศนิยมได้ Floating-Point Types
▪ DECIMAL(5,2) (where 5 is the precision and 2 is the scale. )
▪ The value range will be from -999.99 to 999.99.
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 157
Type Lengthin
Bytes
Minimum Value
(Signed)
Maximum Value
(Signed)
Minimum Value
(Unsigned)
Maximum Value
(Unsigned)
FLOAT 4 -3.402823466E+38 -1.175494351E-38 1.175494351E-38 3.402823466E+38
DOUBLE 8 -1.7976931348623
157E+ 308
-2.22507385850720
14E- 308
0, and
2.22507385850720
14E- 308
1.797693134862315
7E+ 308
158. DATETIME, DATE
▪ วันและเวลา
▪ ข้อควรระวัง ข้อมูลที่เป็นวันที่ ห้าม ใช้ text ธรรมดำ
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 158
Types Description Display Format Range
DATETIME Use when you need values containing
both date and time information.
YYYY-MM-DD HH:MM:SS '1000-01-01 00:00:00' to
'9999-12-31 23:59:59'.
DATE Use when you need only date
information.
YYYY-MM-DD '1000-01-01' to '9999-12-31'.
TIMESTAMP Values are converted from the current
time zone to UTC while storing and
converted back from UTC to the current
time zone when retrieved.
YYYY-MM-DD HH:MM:SS '1970-01-01 00:00:01' UTC to
'2038-01-19 03:14:07' UTC
164. FOREIGN KEY
▪ คีย์นอก ใช้ในการเชื่อมโยงข้อมูล
▪ ข้อควรระวัง คีย์นอกต้องเชื่อมกับคีย์หลักเท่ำนั้น
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 164
CREATE TABLE `employee` (
`EmployeeID` varchar(6) NOT NULL PRIMARY KEY,
`Title` varchar(10) NOT NULL,
`Name` varchar(30) NOT NULL,
`Sex` varchar(10) NOT NULL,
`Education` varchar(20) NOT NULL,
`Start_Date` date NOT NULL,
`Salary` float NOT NULL,
`DepartmentID` varchar(2) NOT NULL,
FOREIGN KEY (`DepartmentID`) REFERENCES `department` (`DepartmentID`)
);
165. DROP TABLE
▪ ลบตาราง (ทั้งตารางและข้อมูลหาย)
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 165
DROP TABLE employee;
166. ALTER TABLE
▪ ใช้ในการเพิ่มคอลัมน์, เปลี่ยนชื่อคอลัมน์, แก้ไขคอลัมน์
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 166
ALTER TABLE department ADD Tel int;
ALTER TABLE department MODIFY Tel varchar(10);
ALTER TABLE department CHANGE Tel DepartmentTel varchar(10);
ALTER TABLE department DROP DepartmentTel;
167. INSERT INTO
▪ เพิ่มข้อมูลลงตาราง
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 167
INSERT INTO `department` VALUES
('AC', 'บัญชี');
INSERT INTO `department` (`DepartmentName`, `DepartmentID`) VALUES
('โปรแกรมเมอร์', 'PG');
172. ORDER BY
▪ ORDER BY กาหนดให้เรียงลาดับผลลัพธ์ โดยที่
▪ ASC เรียงจากน้อยไปมาก
▪ DESC เรียงจากมากไปน้อย
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 172
SELECT `EmployeeID`, `Name`, `Salary`
FROM employee
WHERE `Salary` >= 15000
ORDER BY `Salary` ASC;
173. SELECT (กับตัวอักษร)
▪ LIKE ตรงตามตัวอักษร
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 173
SELECT * FROM `employee`
WHERE `Title` LIKE 'นาย';
174. SELECT (กับตัวอักษร)
▪ สัญลักษณ์ _ ใช้แทนจานวนที่ไม่ทราบค่า 1 ตัว
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 174
SELECT * FROM `employee`
WHERE `Title` LIKE 'นา_';
175. SELECT (กับตัวอักษร)
▪ สัญลักษณ์ % ใช้แทนจานวนอักษรได้หลายตัว
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 175
SELECT * FROM `employee`
WHERE `Title` LIKE 'นา%';
176. SELECT (AND, OR)
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 176
SELECT `Name`,`Title`,`Salary`
FROM `employee`
WHERE Title = 'นาย’
AND `Salary` >= 20000;
SELECT `Name`,`Title`,`Salary`
FROM `employee`
WHERE Title = 'นาย’
OR `Salary` >= 20000;
177. SELECT (IN)
▪ IN ในกลุ่มของ
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 177
SELECT *
FROM `employee`
WHERE `Salary` >= 15000
AND `Education` IN ('ปริญญาตรี','ปริญญาโท');
178. Subqueries
▪ การเรียกดูข้อมูลแบบซ้อนกัน สามารถใช้ข้อมูลมากกว่า 1 ตารางได้
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 178
SELECT *
FROM `employee`
WHERE `DepartmentID` =
(SELECT `DepartmentID`
FROM `department`
WHERE `DepartmentName` LIKE 'โปรแกรมเมอร์' );
179. JOIN (Old Style)
เขียนเว็บติดต่อฐานข้อมูล HTML, CSS, PHP, MySQL, Database 179
SELECT `EmployeeID`,`Name`, `Salary`, `DepartmentName`
FROM `employee`, `department`
WHERE employee.DepartmentID = department.DepartmentID
AND `Salary` >= 15000;