Простой дизайн сайта портфолио с использованием HTML
Опубликовано: 27 Августа, 2022
Быть веб-разработчиком и иметь портфолио очень помогает при поиске возможностей и служит демонстрацией нашего таланта, поэтому в этой статье мы узнаем, как сделать простое одностраничное портфолио, просто используя HTML. Это портфолио может содержать очень важную информацию о вас, например:
- раздел о нас
- ваши проекты
- ваши достижения
- ваши контактные данные
Вы даже можете добавить другие детали в свое портфолио и сделать его более красивым. Но эта статья ориентирована на новичков, которые хотят научиться создавать свое портфолио с помощью простого HTML.
Предварительное условие: основные понятия HTML, такие как теги, атрибуты, формы, таблицы, строки, столбцы, гиперссылки и т. д.
Реализация кода:
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>HTML Project</title></head><body> <!--Header(start)--> <table id="header" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#4CAF50"> <tr> <td> <table border="0" cellpadding="15" cellspacing="0" width="90%" align="center"> <tr> <td> </td> <td> <font face="Comic sans MS" size="6"> <b>GeeksForGeeks</b> </font> </td> <td width="15%"> </td> <td> <a href="#home" style="text-decoration:none"> <font face="Verdana" size="5" color=black> Home </font> </a> </td> <td> | </td> <td> <a href="#about" style="text-decoration:none"> <font face="Verdana" size="5" color=black> About </font> </a> </td> <td> | </td> <td> <a href="#projects" style="text-decoration:none"> <font face="Verdana" size="5" color=black> Projects </font> </a> </td> <td> | </td> <td> <a href="#achievements" style="text-decoration:none"> <font face="Verdana" size="5" color=black> Achievements </font> </a> </td> <td> | </td> <td> <a href="#contact" style="text-decoration:none"> <font face="Verdana" size="5" color=black> Contact </font> </a> </td> </tr> </table> </td> </tr> </table> <!--Header(end)--> <!--Home(start)--> <table id="home" border="1" width="100%" cellpadding="20" cellspacing="0" bgcolor="black"> <tr> <td> <table border="0" cellpadding="15" cellspacing="0" width="90%" align="center"> <tr> <td align="center" valign="middle"> <h3> <font face="Times New Roman" size="6" color="#ffffff"> Hi Geeks! </font> </h3> <h2> <font face="Verdana" size="6" color="#4CAF50"> <!-- Freelance Programmer --> </font> </h2> </td> </tr> </table> </td> </tr> </table> <!--Home(end)--> <!--About(start)--> <table id="about" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="black"> <tr> <td> <table border="0" cellpadding="15" cellspacing="0" width="80%" align="center"> <tr> <td height="180" align="center" valign="middle" colspan="2"> <font face="Verdana" size="7" color="#4CAF50"> About Me </font> <hr color="#4CAF50" width="90"> </td> </tr> <tr> <td width="40%"> <img src="img.png"> </td> <td width="60%"> <font face="Verdana" size="4" color="white"> Thanks for your interest, here is a quick story of me and this website. <hr color="black"> Sandeep Jain An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. <hr color="black"> I do my work mainly in C-Language, C++ and JAVA. C++ and Data Structure & Algorithm are my stronger section. Besides these I know Web Development, LINUX and database as well. <hr color="black"> This website is basically one of my Web Development project which is built using HTML only. Here one can also find ideas for projects in different languages. Thanks again for reading this, because of people like you, it exists and prospers! <hr color="black"> Cheers, <br> <b>GeeksForGeeks.</b> </font> </td> </tr> </table> <hr color="black"> <hr color="black"> <hr color="black"> </td> </tr> </table> <!--About(end)--> <!--Projects(start)--> <table id="projects" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="#c2c0c3"> <tr>
РЕКОМЕНДУЕМЫЕ СТАТЬИ |