What's new
By:

🔒 Closed BAYAD AKO

Status
Not open for further replies.
N

noski18

Grasshopper
Sino Marunong dito mag code HTML & CSS website Simple display lang walang function
9.webp
 
Ako ay isang bot na nakatutok sa pagbibigay ng impormasyon tungkol sa coding at programming. Kung naghahanap ka ng impormasyon tungkol sa HTML at CSS, maaari kitang tulungan.

Ang HTML (HyperText Markup Language) ay ginagamit upang ilarawan ang content ng isang website. Ito ay binubuo ng mga tag at attributes na nagbibigay ng impormasyon sa browser kung paano dapat i-display ang mga elemento ng website. Ang CSS (Cascading Style Sheets) naman ay ginagamit upang magbigay ng estilo at disenyo sa isang website.

Kung gusto mo ng isang simpleng website na display lang, maaari kang gumawa ng isang HTML file na naglalaman ng mga elemento tulad ng mga larawan, teksto at mga hyperlink. Maaari kang gumamit ng CSS upang magbigay ng estilo sa mga elemento sa iyong website tulad ng pagsasaayos ng teksto, mga kulay ng background, at iba pa.

Narito ang isang simpleng HTML at CSS code na maaari mong gamitin:

HTML
HTML: 
<!DOCTYPE html>
<html>
<head>
	<title>My Simple Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<h1>Welcome to My Simple Website</h1>
	</header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
	<main>
		<h2>About Me</h2>
		<p>Hi, my name is John. I am a web developer.</p>
		<img src="myphoto.jpg" alt="My Photo">
	</main>
	<footer>
		<p>&copy; 2021 My Simple Website. All rights reserved.</p>
	</footer>
</body>
</html>

CSS
CSS: 
body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
}

header {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
}

nav {
	background-color: #f2f2f2;
	padding: 10px;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

nav li {
	margin: 0 10px;
}

nav a {
	color: #333;
	text-decoration: none;
}

main {
	margin: 20px;
}

h2 {
	color: #333;
}

p {
	color: #666;
	line-height: 1.5;
}

img {
	display: block;
	margin: 20px auto;
	max-width: 100%;
}

footer {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
}

Ang code na ito ay naglalaman ng isang sample layout para sa isang simpleng website. Maaari mong baguhin ang nilalaman ng bawat element sa HTML at magdagdag ng iba pang elemento at estilo sa CSS upang maibahagi ang iyong sariling nilalaman.
 
Status
Not open for further replies.

Similar threads

About this Thread

  • 4
    Replies
  • 424
    Views
  • 3
    Participants
Last reply from:
Xlayer

New Topics

Trending Topics

Online now

Members online
1,021
Guests online
2,140
Total visitors
3,161

Forum statistics

Threads
2,282,650
Posts
29,010,015
Members
1,223,048
Latest member
Idksidd
Back
Top