pada postingan kali ini gua bakalan share cara Membuat web sederhana menggunakan notepad++ ,
sebenernya sih kalo membuat web itu sedikit agak susah bro tapi di sini gua bakalan share yang sederhana aja dah bro , kalo lu mau jadi master web syarat lu cuman harus mahir beberapa kode pemograman seperti HTML ,PHP ,CSS, SQL, Java, dan lain sebagainya
langsung pada intinya
Struktur dokumen HTML adalah
<html>
<head>
<title>judul </title>
</head></body>
</html>
di awali dengan <html> dan di akhiri dengan </html> , untuk semua kode awalnya pasti tidak menggunakan tanda / tapi pasti untuk akhiranya adalah menggunakan tanda / alasanya karena tanda / adalah untuk penutup kode kode tersebut .
untuk kode tag <title> adalah untuk judul web elo bro dan untuk tag <body> berfungsi untuk mendefisinikan baggian utama atau isi web
oke deh bro coba dah lu buka notepad++ yang ada di pc/laptop lu ( sebenernya ga make notepad++ juga ga masalah bro , tapi tampilan notepad biasa dengan notepad++ itu beda) , sekarang buka notepad biasa atau notepad++ yang ada di komputer elu bro.
kalo udah di buka coba elu copy pastekan kode html yang ada di bawah ini (Tekan CTRL+C aja bro !)
gua menjelaskan tentang yg seperti di gambar ini :
--------------------------------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <title>MY WEB</title> </head> <body> <center> <table width="600" border="0" bgcolor="gainsboro"> <tr> <td> <table> <tr> <td width="400"><i>Use this area to offer a short teaser of your email's content. Text here will show in the preview area of some email clients.</i></td> <td width="25"></td> <td width="175"><i>Email not displaying correctly? <br/><span style="color:blue"><u>View it in your browser.</u></span></i></td> </tr> </table> </td> </tr> <tr> <td> <img src="cube.png"/> </td> </tr> <tr> <td> <table> <tr> <td width="15"> <td width="570"><i><h1>Designing Your Template</h1> <h4>Creating a good-looking email is simple</h4> <p>Customize your template by clicking on the style editor tabs up above. Set your fonts, colors, and styles. After setting your styling is all done you can click here in this area, delete the text, and start adding your own awesome content. </p> <h3>Styling Your Content </h3> <h4>Make your email easy to read </h4> <p>After you enter your content, highlight the text you want to style and select the options you set in the style editor in the "styles" drop down box. Want to <span style="color:blue"><u>get rid of styling on a bit of text</u></span>, but having trouble doing it? Just use the "remove formatting" button to strip the text of any formatting and reset your style.</p> </i></td> <td width="15"></td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td width="15"></td> <td width="200"> <img src="purple.png"/></td> <td width="10"></td> <td width="200"> <img src="yellow.png"/></td> <td width="10"></td> <td width="155"> <img src="red.png"/></td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td width="15"></td> <td width="190"> <h3><i>Repeatable Content<i></h3> <p><i><span style="color:blue"><u>Repeatable sections</u></span> are noted with plus and minus signs so that you can add and subtract content blocks.</p> <p>You can also get a little fancy; repeat blocks and remove all text to make image galleries, or do the opposite and remove images for text-only blocks.</i></p></td> <td width="20"></td> <td width="190"> <h3><i>Repeatable Content<i></h3> <p><i><span style="color:blue"><u>Repeatable sections</u></span> are noted with plus and minus signs so that you can add and subtract content blocks.</p> <p>You can also get a little fancy; repeat blocks and remove all text to make image galleries, or do the opposite and remove images for text-only blocks.</i></p></td> <td width="20"></td> <td width="190"> <h3><i>Repeatable Content<i></h3> <p><i><span style="color:blue"><u>Repeatable sections</u></span> are noted with plus and minus signs so that you can add and subtract content blocks.</p> <p>You can also get a little fancy; repeat blocks and remove all text to make image galleries, or do the opposite and remove images for text-only blocks.</i></p></td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td width="135"><i><span style="color:blue"><u>Follow on Twitter</u></span></td> <td width="150"><i><span style="color:blue"><u>Friend on Facebook</u></span></td> <td width="125"><span style="color:blue"><u><i>Forward to Friend</u></i></span></td> </tr> </table> <table width="600" border="0"> <tr> <td width="550"><span style="font-size:14px"><i>Copyright © *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.<br />*|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|*</span></i> <br><br><i><b>Our mailing address is:</b><br><span style="font-size:14px">*|HTML:LIST_ADDRESS_HTML|* *|END:IF|*</span></td> </tr> <table width="600" border="0"> <tr> <td width="130"><span style="color:blue"><i><u>unsubscribe from this list</u></i></span></td> <td width="300"><span style="color:blue"><i><u>update subscription preferences</u></i></span></td> </tr> </table> </td> </tr> </table> </body> </html> ------------------------------------------------------------------
dan inilah coding untuk membuat web pada gambar diatas, apabila ada kesalahan kalimat mohon di kritik, jangan di gelitik :P
dan kalau mau gambarnya, nah gua share, tapi donlod sendiri :P
Link :
Cube biru
Cube ungu
Cube kuning
Cube merah
Sekian dan semoga bermanfaat
